/*
 * OpenCX pattern styles.
 *
 * Reserved for the few cases that cannot be expressed in theme.json.
 * Prefer design tokens, style variations or core blocks instead.
 */

/*
 * Global Home Page Background
 * Ensures the global page canvas and all Home section backgrounds match Figma's
 * background token var(--Color-OpenCX-Dune-Lightest, #F8F6F0).
 */
html:has(body.home),
html:has(body.page-id-18),
body.home,
body.home .wp-site-blocks,
body.page-id-18,
body.page-id-18 .wp-site-blocks,
body.page-template-front-page,
body.page-template-front-page .wp-site-blocks {
	background-color: var(--Color-OpenCX-Dune-Lightest, #F8F6F0) !important;
}

.home .wp-block-template-part,
.page-id-18 .wp-block-template-part,
.home .ocx-industries-preview__section,
.page-id-18 .ocx-industries-preview__section,
.home .ocx-industries-preview__container,
.page-id-18 .ocx-industries-preview__container,
.home .ocx-industries-preview__col-right,
.page-id-18 .ocx-industries-preview__col-right,
.home .ocx-testimonial__section,
.page-id-18 .ocx-testimonial__section,
.home .ocx-c25__section,
.page-id-18 .ocx-c25__section,
.home .ocx-footer,
.page-id-18 .ocx-footer {
	background-color: var(--Color-OpenCX-Dune-Lightest, #F8F6F0) !important;
}

/*
 * Global Industries Page Background
 * Canvas background token var(--Color-OpenCX-White, #FCFBF9).
 * Applied globally to the page canvas/wrapper (not forced onto individual sections).
 */
html:has(body.page-industries),
html:has(body.page-id-66),
body.page-industries,
body.page-industries .wp-site-blocks,
body.page-id-66,
body.page-id-66 .wp-site-blocks,
body.page-template-page-industries,
body.page-template-page-industries .wp-site-blocks {
	background-color: var(--Color-OpenCX-White, #FCFBF9) !important;
	background: var(--Color-OpenCX-White, #FCFBF9) !important;
}

.page-industries .wp-block-template-part,
.page-id-66 .wp-block-template-part,
.page-template-page-industries .wp-block-template-part {
	background-color: var(--Color-OpenCX-White, #FCFBF9) !important;
}

/*
 * Industries Testimonial Section (#12876:2495)
 * Match page canvas and card background to #FCFBF9
 */
.page-industries .ocx-testimonial__section,
.page-id-66 .ocx-testimonial__section,
.page-template-page-industries .ocx-testimonial__section {
	background-color: var(--Color-OpenCX-White, #FCFBF9) !important;
	background: var(--Color-OpenCX-White, #FCFBF9) !important;
}

.page-industries .ocx-testimonial__card,
.page-id-66 .ocx-testimonial__card,
.page-template-page-industries .ocx-testimonial__card {
	background-color: var(--Color-OpenCX-White, #FCFBF9) !important;
	background: var(--Color-OpenCX-White, #FCFBF9) !important;
}

/*
 * Global About Page Background
 * Canvas background token var(--Color-OpenCX-Dune-Lightest, #F8F6F0).
 */
html:has(body.page-about),
html:has(body.page-id-72),
body.page-about,
body.page-about .wp-site-blocks,
body.page-id-72,
body.page-id-72 .wp-site-blocks,
body.page-template-page-about,
body.page-template-page-about .wp-site-blocks {
	background-color: var(--Color-OpenCX-Dune-Lightest, #F8F6F0) !important;
	background: var(--Color-OpenCX-Dune-Lightest, #F8F6F0) !important;
}

.page-about .wp-block-template-part,
.page-id-72 .wp-block-template-part,
.page-template-page-about .wp-block-template-part,
.page-about .ocx-header,
.page-id-72 .ocx-header,
.page-about .ocx-footer,
.page-id-72 .ocx-footer,
.page-about footer.wp-block-template-part,
.page-id-72 footer.wp-block-template-part,
.page-about .ocx-solaas-cta__section,
.page-id-72 .ocx-solaas-cta__section,
.page-template-page-about .ocx-solaas-cta__section,
.page-about .ocx-solaas-cta__container,
.page-id-72 .ocx-solaas-cta__container,
.page-template-page-about .ocx-solaas-cta__container {
	background-color: var(--Color-OpenCX-Dune-Lightest, #F8F6F0) !important;
}

/*
 * Global Contact Page Background
 * Canvas background token var(--Color-OpenCX-Dune-Lightest, #F8F6F0).
 */
html:has(body.page-contact),
html:has(body.page-id-79),
body.page-contact,
body.page-contact .wp-site-blocks,
body.page-id-79,
body.page-id-79 .wp-site-blocks,
body.page-template-page-contact,
body.page-template-page-contact .wp-site-blocks {
	background-color: var(--Color-OpenCX-Dune-Lightest, #F8F6F0) !important;
	background: var(--Color-OpenCX-Dune-Lightest, #F8F6F0) !important;
}

.page-contact .wp-block-template-part,
.page-id-79 .wp-block-template-part,
.page-template-page-contact .wp-block-template-part,
.page-contact .ocx-header,
.page-id-79 .ocx-header,
.page-contact .ocx-footer,
.page-id-79 .ocx-footer,
.page-contact footer.wp-block-template-part,
.page-id-79 footer.wp-block-template-part {
	background-color: var(--Color-OpenCX-Dune-Lightest, #F8F6F0) !important;
}

/*
 * Navigation breakpoint.
 *
 * The hamburger breakpoint of the core/navigation block is hardcoded at 600px
 * in wp-includes/blocks/navigation/style.css and cannot be set from theme.json.
 * With the logo (159px) + 8 links + 2 buttons the header needs ~1267px to stay
 * on a single row, so between 600px and 1200px the links would wrap onto a
 * second line. This restores the core mobile (overlay) behaviour for that
 * range so the row never breaks.
 *
 * Selectors are prefixed with .wp-block-navigation to outrank the core rules
 * (0,4,0 and 0,3,0 vs core's 0,3,0 and 0,2,0) and therefore win regardless of
 * stylesheet load order.
 */
@media (min-width: 600px) and (max-width: 1199.98px) {
	.wp-block-navigation .wp-block-navigation__responsive-container:not(.hidden-by-default):not(.is-menu-open) {
		display: none;
		width: auto;
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		z-index: auto;
		background-color: transparent;
	}

	.wp-block-navigation .wp-block-navigation__responsive-container-open:not(.always-shown) {
		display: flex;
	}
}

/*
 * Dropdown children typography.
 *
 * Figma uses Widescreen 16px (line-height 1.5) for the items inside the About
 * menu, while the top-level items are 18px. theme.json cannot express this:
 * `styles.css` is ignored entirely in this WordPress version, and a `css` rule
 * nested under `styles.blocks` gets re-scoped to
 * `.wp-block-navigation.<block classes>` with the segments joined by no
 * space, so the selector can never match a real element.
 *
 * The size is left on --wp--preset--font-size--body, which is 18px in
 * theme.json, so this does NOT render the 16px the paragraph above describes.
 * Switching it to --Text-Sizes-Text-Regular does produce 16px, and was tried
 * and reverted on request. Do not "fix" it without asking.
 *
 * The family is declared here for symmetry with the rest of the file, but the
 * dropdown no longer needs its own rule: the whole site is now Widescreen, and
 * `.wp-block-navigation` inherits it. Keep it only as a guard against a future
 * change to that block.
 */
.wp-block-navigation-item.has-child .wp-block-navigation-item__content {
	font-family: var(--wp--preset--font-family--widescreen);
	font-size: var(--wp--preset--font-size--body);
	line-height: 1.5;
}

/*
 * Desktop placement of the navigation between logo and actions.
 *
 * Figma (Navbar / 1 /, 10310:1173) puts the nav column at x=374 inside the
 * 1280px container and the actions flush right at x=1040, so the gaps are
 * 217px and 134px. They are not equal, so justify-content: space-between
 * would place the nav at 332px instead of 374px.
 *
 * `style.spacing.margin` cannot express this: core/navigation and
 * core/buttons declare support for spacing.blockGap but not spacing.margin,
 * so the attribute is silently dropped. Scoped to the inline breakpoint so
 * the mobile overlay trigger is not pushed sideways.
 */
/*
 * Full navbar, spec from the user, matching Figma "Navbar / 1 /" (10310:1173):
 * 1441x160 with 80.5px of horizontal page padding. The 160px comes from the
 * row being vertically centred (1441 = 80.5 + 1280 + 80.5), which is why the
 * old 58px top/bottom padding was replaced by `align-items:center`.
 *
 * The 58px value was the vertical padding of a group; centring a 44px row in
 * 160px gives the same 58px, so this is the same layout expressed on the
 * element Figma actually describes.
 *
 * Figma's frame is 1441px wide because its 80.5px padding was rounded up, but
 * a 1440px viewport only has 1440. `max-width:100%` plus border-box clamps the
 * box instead of letting it overflow by 1px, which costs 1px of the row width
 * at the design width and is recorded in BACKLOG.md.
 */
.ocx-header {
	display: flex;
	box-sizing: border-box;
	width: 1441px;
	max-width: 100%;
	height: 160px;
	padding: 0 var(--Header-padding);
	justify-content: center;
	align-items: center;
	flex-shrink: 0;
}

/*
 * The logo slot. Figma's "Content" frame (10310:1175) is 157x42 at y=1 and
 * reserves the space that puts the nav column at x=374 (157 + 217). The home
 * header has no logo, so it reserves the same box with a hidden spacer, which
 * keeps the nav aligned with the interior pages.
 */
.ocx-header__logo {
	flex: 0 0 auto;
	width: 157px;
	height: 42px;
}

.ocx-header__logo .wp-block-site-logo {
	width: 147px;
}

/*
 * The clone that `assets/js/logo-intro.js` drops into the empty slot for the
 * intro, and removes again. It is a bare `img` rather than a `core/site-logo`
 * block, so it needs the same 147px the block gets: the flight is only a
 * translation because both ends are the same size.
 *
 * `pointer-events: none` is load-bearing for the same reason the beam's is: the
 * clone sits on top of the header row, and a painted-but-clickable logo would
 * swallow the first click on the nav.
 */
.ocx-logo-intro__clone {
	display: block;
	width: 147px;
	height: auto;
	pointer-events: none;
}

/*
 * The 80.5px page padding and the 160px height belong to the 1440 design. Below
 * 1200px the nav is in the overlay, so the header reverts to auto height and the
 * theme's root padding provides the inset instead.
 */
/*
 * A button label must never wrap.
 *
 * The header buttons are `display: flex` with `padding: 10px 24px`, and the
 * max-content width of the box does not leave the label enough room: at 1440
 * "Sign In" needs 51.8px and got a 50.2px content box, so it broke onto two
 * lines and the button rendered 70px tall instead of 46px. "Let's meet" did the
 * same (80px of text in 76.8px, 68px tall instead of 44px). Figma has both
 * labels on one line in a `hug` box.
 *
 * This used to be scoped to `max-width: 1199.98px`, which is where it was first
 * noticed, and so did nothing on desktop -- the exact width where the theme is
 * designed at 1440.
 */
.ocx-header__row .wp-block-button__link {
	white-space: nowrap;
}

/*
 * The 80.5px page padding and the 160px height belong to the 1440 design. Below
 * 1200px the nav is in the overlay, so the header reverts to auto height and the
 * theme's root padding provides the inset instead.
 */
@media (max-width: 1199.98px) {
	.ocx-header {
		height: auto;
		padding: 0;
	}
}

/*
 * 320px. `--Max-Width-max-width-xxsmall` de `tokens.css` es 320, asi que el viewport
 * entra en el diseno y hay que cerrarlo: con el padding global de 20 quedan 280
 * utilizables y la fila pide 333 (logo 157 + nav 24 + gap 32 + boton "Let's meet" 120).
 *
 * El corte se hace sin cambiar el diseno >= 360 porque el desborde solo aparece por
 * debajo: a 360 la fila entra y `scrollWidth` da 0. Baja el slot de logo a 116, el gap
 * a 16 y el padding del boton a 14, con lo que la fila queda en 264 y sobran 16 de
 * holgura. El `height` del logo baja a 36 para no dejar un caja de 42 con un logo de
 * 108.
 */

@media (min-width: 1200px) {
	/*
	 * Figma "Container" (#10310:1174) is a fixed 1280x44 row holding the logo,
	 * the nav column and the actions column, centred at x=80.5 inside the 1440
	 * frame. Scoped to the desktop breakpoint because below 1200px the nav moves
	 * into the overlay and the row has to stretch to the viewport.
	 *
	 * `max-width:100%` is the guard: 1280px only exists above 1440, and between
	 * 1200 and 1440 a hard 1280 would push the row past the root padding.
	 */
	.ocx-header__row {
		width: var(--Container-container-large);
		max-width: 100%;
		height: 44px;
		flex-shrink: 0;
	}

	/*
	 * `nav.ocx-nav--menu` and not `.ocx-nav--menu`: core copies the block's
	 * className onto the inner <ul> as well, so a bare class selector matched
	 * both elements and the offset was applied twice.
	 */
	nav.ocx-nav--menu {
		margin-left: 64px;
		flex: 0 0 auto;
	}

	/*
	 * Figma "Nav links" (#10310:1178) is a fixed 532x27 row: five links totalling
	 * 499px separated by 26px gaps, plus 33px of trailing slack. The gaps check
	 * out exactly (89+26+70+26+96+26+89+26+51 = 499), so padding-right:33px is
	 * the remainder of the 532px frame rather than arbitrary spacing.
	 *
	 * `width` + `flex-shrink:0` also replace the `flex-wrap:nowrap` patch below:
	 * with a fixed 532px track the row can no longer be squeezed under 532px.
	 *
	 * Figma's 532px is the frame's outer width, so the box has to be border-box.
	 * Under the default content-box the element rendered 565px (532 + 33 padding).
	 */
	nav.ocx-nav--menu .wp-block-navigation__container {
		flex-wrap: nowrap;
		align-items: flex-start;
		gap: 26px;
		box-sizing: border-box;
		width: 532px;
		height: 27px;
		padding-right: 33px;
		flex-shrink: 0;
	}

	.ocx-header .wp-block-buttons {
		flex-wrap: nowrap;
		margin-left: auto;
	}
}

/*
 * Figma only specifies the 1440px header, where the nav column sits 217px
 * after the logo. The row needs 159 + 217 + 478 + 236 = 1090px, which overflows
 * the 1040px available at the 1200px hamburger breakpoint, so the offset only
 * reaches its designed value once there is room for it.
 */
@media (min-width: 1340px) {
	nav.ocx-nav--menu {
		margin-left: 217px;
	}
}

/*
 * Header nav link colour.
 *
 * Every nav label in Figma is filled #162227 (fill_e51c4518 in the home navbar,
 * and the same token in the shared "Navbar main"). What renders instead is
 * #000000, for two reasons: `body` carries `color: var(--wp--preset--color--black)`
 * out of theme.json, and core's navigation stylesheet puts `color: inherit` on
 * `.wp-block-navigation-item__content`, which outranks the global
 * `a:where(:not(.wp-element-button)) { color: navy }` -- `:where()` contributes
 * no specificity, so that rule is effectively (0,0,1) and loses.
 *
 * Scoped to the header nav so the footer keeps whatever it has today.
 *
 * The value comes from the `navy` preset, which theme.json already maps to
 * #162227, rather than from `--Color-Subnav-Text`: that one resolves to the
 * same hex but tokens.css coins it for the form card the caret belongs to, so
 * borrowing it here would make the name a lie.
 */
/*
 * `.ocx-header` is load-bearing for specificity, not for scoping: core ships
 * `.wp-block-navigation .wp-block-navigation-item__content.wp-block-navigation-item__content`
 * with `color: inherit`, which is (0,3,0). A bare
 * `nav.ocx-nav--menu .wp-block-navigation-item__content` is only (0,2,1) and
 * loses, so the extra class is what puts this at (0,3,1).
 */
.ocx-header nav.ocx-nav--menu .wp-block-navigation-item__content {
	color: var(--wp--preset--color--navy, #162227);
}

/*
 * The home navbar, a third navbar, and the only one of the three that Figma
 * gives its own background: "Navbar / 1 /" (#12524:83228) is a 160px frame
 * filled #F8F6F0, against the #FCFBF9 of the shared "Navbar main"
 * (#12501:29958) that the other six pages use.
 *
 * Its "Container" (#12524:83229) is a `space-between` row at 1280 wide holding
 * **three** tracks -- the logo slot, "Column" (#12524:83232) with the nav, and
 * "Column" (#12524:83254) with the actions at a fixed 240 -- so the row has to
 * spread instead of using the fixed `margin-left` offsets the default navbar
 * fakes space-between with.
 *
 * The links are 40px apart here, against the 26px of the default navbar, and
 * "Nav links" (#12524:83233) hugs its content rather than sitting in the fixed
 * 532px track, so the width/height/padding-right of that track are all reset.
 *
 * The nav has no submenu items, so the 24x24 chevrons Figma draws next to
 * Ecosystem and Industries are deliberately absent: there is nothing to open.
 */
.ocx-header--home {
	background-color: var(--Color-OpenCX-Dune-Lightest, #f8f6f0) !important;
	width: 100% !important;
	max-width: 100% !important;
	box-sizing: border-box !important;
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
}

@media (min-width: 992px) {
	.ocx-header--home {
		min-height: 160px !important;
		height: 160px !important;
		padding: 0 80px !important;
	}

	.ocx-header--home .ocx-header__row {
		width: 100% !important;
		max-width: 1280px !important;
		height: 44px !important;
		display: flex !important;
		flex-direction: row !important;
		align-items: center !important;
		justify-content: space-between !important;
		flex-wrap: nowrap !important;
		margin: 0 auto !important;
	}

	.ocx-header--home .ocx-header__logo {
		width: 157px !important;
		height: 44px !important;
		flex: 0 0 157px !important;
	}

	.ocx-header--home .ocx-header__logo-link {
		display: none !important;
	}

	.ocx-mobile-toggle {
		display: none !important;
	}

	.ocx-mobile-drawer {
		display: none !important;
	}
}

.ocx-header--home .ocx-nav--menu {
	display: flex !important;
	flex-direction: row !important;
	align-items: center !important;
	gap: 40px !important;
	margin: 0 !important;
	padding: 0 !important;
	flex: 0 0 auto !important;
}

.ocx-header--home .ocx-nav-link {
	display: inline-flex !important;
	align-items: center !important;
	gap: 6px !important;
	color: #162227 !important;
	text-decoration: none !important;
	font-family: 'Widescreen', sans-serif !important;
	font-size: 18px !important;
	font-weight: 400 !important;
	line-height: 1.5 !important;
	white-space: nowrap !important;
	transition: opacity 0.2s ease;
}

.ocx-header--home .ocx-nav-link:hover {
	opacity: 0.7;
}

.ocx-header--home .ocx-nav-plus {
	width: 20px !important;
	height: 20px !important;
	display: inline-block !important;
	vertical-align: middle !important;
	flex-shrink: 0 !important;
}

.ocx-header--home .ocx-header__actions {
	display: flex !important;
	flex-direction: row !important;
	align-items: center !important;
	gap: 16px !important;
	flex: 0 0 auto !important;
}

.ocx-header--home .ocx-header__signin {
	display: none !important; /* Oculto a pedido del usuario (no eliminado) */
	align-items: center !important;
	justify-content: center !important;
	width: 61px !important;
	height: 44px !important;
	flex-shrink: 0 !important;
	text-decoration: none !important;
	line-height: 1 !important;
}

.ocx-header--home .ocx-header__signin img {
	width: 61px !important;
	height: 44px !important;
	display: block !important;
}

.ocx-header--home .ocx-btn--meet {
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	width: 129px !important;
	height: 44px !important;
	padding: 10px 24px !important;
	background: var(--Color-OpenCX-Dune, #B69E52) !important;
	color: var(--Color-OpenCX-White, #FCFBF9) !important;
	border-radius: 0px !important;
	border: none !important;
	font-family: 'Widescreen', sans-serif !important;
	font-size: 16px !important;
	font-weight: 300 !important;
	line-height: 24px !important;
	letter-spacing: 0px !important;
	text-decoration: none !important;
	white-space: nowrap !important;
	box-sizing: border-box !important;
	transition: opacity 0.2s ease;
}

.ocx-header--home .ocx-btn--meet:hover {
	opacity: 0.9 !important;
}

/*
 * Header Navbar Dropdowns (Ecosystem & Industries)
 */
.ocx-header .ocx-nav-item,
.ocx-header--home .ocx-nav-item,
.ocx-header--ecosystem .ocx-nav-item {
	position: relative !important;
	display: inline-flex !important;
	align-items: center !important;
}

.ocx-nav-item--has-dropdown {
	cursor: pointer;
}

.ocx-nav-item--has-dropdown > .ocx-nav-link {
	cursor: pointer;
}

/* Plus icon rotation on hover / focus / open */
.ocx-nav-plus {
	transition: transform 0.28s cubic-bezier(0.25, 1, 0.5, 1), opacity 0.2s ease !important;
}

.ocx-nav-item--has-dropdown:hover > .ocx-nav-link .ocx-nav-plus,
.ocx-nav-item--has-dropdown:focus-within > .ocx-nav-link .ocx-nav-plus,
.ocx-nav-item--has-dropdown.is-open > .ocx-nav-link .ocx-nav-plus {
	transform: rotate(45deg) !important;
}

/* The Dropdown Menu Panel */
.ocx-nav-dropdown {
	position: absolute !important;
	top: calc(100% + 14px) !important;
	left: 50% !important;
	transform: translateX(-50%) translateY(8px) !important;
	min-width: 228px !important;
	background: #FFFFFF !important;
	border: 1px solid rgba(203, 187, 133, 0.45) !important;
	border-radius: var(--Radius-Small, 16px) !important;
	box-shadow: 0 16px 36px rgba(22, 34, 39, 0.12), 0 4px 12px rgba(22, 34, 39, 0.04) !important;
	padding: 16px 18px !important;
	display: flex !important;
	flex-direction: column !important;
	gap: 6px !important;
	opacity: 0 !important;
	visibility: hidden !important;
	pointer-events: none !important;
	transition: opacity 0.22s cubic-bezier(0.16, 1, 0.3, 1), transform 0.22s cubic-bezier(0.16, 1, 0.3, 1), visibility 0.22s !important;
	z-index: 1000 !important;
}

/* Invisible hover bridge to eliminate gap flickering */
.ocx-nav-dropdown::before {
	content: '' !important;
	position: absolute !important;
	top: -18px !important;
	left: 0 !important;
	right: 0 !important;
	height: 18px !important;
}

/* Dropdown revealed on hover, focus-within, or open state */
.ocx-nav-item--has-dropdown:hover .ocx-nav-dropdown,
.ocx-nav-item--has-dropdown:focus-within .ocx-nav-dropdown,
.ocx-nav-item--has-dropdown.is-open .ocx-nav-dropdown {
	opacity: 1 !important;
	visibility: visible !important;
	pointer-events: auto !important;
	transform: translateX(-50%) translateY(0) !important;
}

/* Dropdown Links */
.ocx-nav-dropdown__link {
	display: block !important;
	padding: 8px 12px !important;
	font-family: var(--wp--preset--font-family--widescreen, 'Widescreen', sans-serif) !important;
	font-size: 15px !important;
	font-weight: 400 !important;
	line-height: 1.4 !important;
	color: #162227 !important;
	text-decoration: none !important;
	border-radius: 8px !important;
	white-space: nowrap !important;
	transition: color 0.18s ease, background-color 0.18s ease, transform 0.18s ease !important;
}

.ocx-nav-dropdown__link:hover,
.ocx-nav-dropdown__link:focus {
	color: var(--Color-OpenCX-Dune, #B69E52) !important;
	background-color: var(--Color-OpenCX-Dune-Lightest, #F8F6F0) !important;
	transform: translateX(4px) !important;
}

.ocx-nav-dropdown__link--active,
.ocx-nav-dropdown__link--active span {
	color: var(--Color-OpenCX-Dune, #B69E52) !important;
	font-weight: 500 !important;
}

/*
 * The Ecosystem navbar, a different navbar from the one above.
 *
 * Figma "Navbar / 1 /" (#10227:110690) on "Platform • Desktop" (#10218:66032) is
 * 92px tall and 1440 wide with `flex-direction: column` and
 * `justify-content: flex-end`, so the row sits at the **bottom** of those 92px
 * rather than centred in them. Its horizontal padding is the page padding, 64px,
 * and not the 80.5px the default header uses. Inside, "Container" (#10218:66544)
 * is a `space-between` row that fills the width, and "Column" (#10218:66547) is
 * the right-hand group: the nav links and the actions separated by 32px.
 *
 * The nav links themselves are a `hug` frame with a 32px gap, where the default
 * header pins them to a fixed 532px track with 26px gaps. That fixed track and
 * the 217px offset that puts the nav column in the middle of the bar are both
 * reset below: they belong to the default header's composition, and here the
 * links are pushed to the right edge by `space-between` instead.
 */
/*
 * Ecosystem & Interior Pages Navbar (Figma 12649-736 / 12501-29958: "Navbar main")
 *
 * Mental model: Auto Layout fluid scaling from 1440px desktop down to tablet & mobile.
 * Background: #FCFBF9. Total height on desktop: 140px (padding 48px 0 around 42px logo / 44px buttons).
 * Outer padding: 0 80px (fluid clamp(24px, 5.5vw, 80px)).
 * Inner row: max-width 1280px, space-between layout.
 * Left: OpenCX Logo (158x42px).
 * Right: Track with 48px gap (nav links + action buttons).
 * Nav links: 40px gap, Widescreen Regular 18px / 1.5, #162227. Active: #B69E52 with gold plus icon.
 * Actions: 10px gap. Sign In (44px height, hairline side borders #CBBB85, icon-login-nav.svg)
 *          + "Let's meet" button (44px height, padding 10px 24px, #B69E52 background, 0px radius).
 */

.ocx-header--ecosystem,
.ocx-header--solution,
.ocx-header--industries,
.ocx-header--privacy {
	background-color: var(--Color-OpenCX-White, #FCFBF9) !important;
	width: 100% !important;
	max-width: 100% !important;
	box-sizing: border-box !important;
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
}

.ocx-header--about,
.ocx-header--contact,
.ocx-header--ecosystem.ocx-header--about,
.ocx-header--ecosystem.ocx-header--contact,
.page-about .ocx-header,
.page-id-72 .ocx-header,
.page-contact .ocx-header,
.page-id-79 .ocx-header {
	background-color: var(--Color-OpenCX-Dune-Lightest, #F8F6F0) !important;
	background: var(--Color-OpenCX-Dune-Lightest, #F8F6F0) !important;
}

@media (min-width: 992px) {
	.ocx-header--ecosystem {
		min-height: 140px !important;
		padding: 0 clamp(24px, 5.5vw, 80px) !important;
	}

	.ocx-header--ecosystem .ocx-header__row {
		width: 100% !important;
		max-width: 1280px !important;
		min-height: 44px !important;
		padding: 49px 0 !important;
		display: flex !important;
		flex-direction: row !important;
		align-items: center !important;
		justify-content: space-between !important;
		flex-wrap: nowrap !important;
		margin: 0 auto !important;
		box-sizing: border-box !important;
	}

	/* Logo (visible on desktop) */
	.ocx-header--ecosystem .ocx-header__logo {
		display: flex !important;
		align-items: center !important;
		flex: 0 0 auto !important;
		width: auto !important;
		height: auto !important;
	}

	.ocx-header--ecosystem .ocx-header__logo-link {
		display: inline-flex !important;
		align-items: center !important;
		text-decoration: none !important;
	}

	.ocx-header--ecosystem .ocx-header__logo-img {
		width: 158px !important;
		height: 42px !important;
		display: block !important;
		object-fit: contain !important;
	}

	/* Nav Track: Menu + Actions */
	.ocx-header--ecosystem .ocx-header__track {
		display: flex !important;
		flex-direction: row !important;
		align-items: center !important;
		gap: clamp(24px, 3.3vw, 48px) !important;
		flex: 0 0 auto !important;
	}

	.ocx-header--ecosystem .ocx-nav--menu {
		display: flex !important;
		flex-direction: row !important;
		align-items: center !important;
		gap: clamp(20px, 2.7vw, 40px) !important;
		margin: 0 !important;
		padding: 0 !important;
		list-style: none !important;
	}

	.ocx-header--ecosystem .ocx-nav-link {
		display: inline-flex !important;
		align-items: center !important;
		gap: 6px !important;
		color: #162227 !important;
		text-decoration: none !important;
		font-family: var(--wp--preset--font-family--widescreen, 'Widescreen', sans-serif) !important;
		font-size: clamp(16px, 1.25vw, 18px) !important;
		font-weight: 400 !important;
		line-height: 1.5 !important;
		white-space: nowrap !important;
		transition: opacity 0.2s ease, color 0.2s ease !important;
	}

	.ocx-header--ecosystem .ocx-nav-link:hover {
		opacity: 0.75 !important;
	}

	.ocx-header--ecosystem .ocx-nav-link.ocx-nav-link--active {
		color: var(--Color-OpenCX-Dune, #B69E52) !important;
	}

	.ocx-header--ecosystem .ocx-nav-plus {
		width: 20px !important;
		height: 20px !important;
		display: inline-block !important;
		vertical-align: middle !important;
		flex-shrink: 0 !important;
	}

	/* Actions: Sign In + Let's meet */
	.ocx-header--ecosystem .ocx-header__actions {
		display: flex !important;
		flex-direction: row !important;
		align-items: center !important;
		gap: 10px !important;
		flex: 0 0 auto !important;
	}

	.ocx-header--ecosystem .ocx-header__signin {
		display: none !important; /* Oculto a pedido del usuario (no eliminado) */
		align-items: center !important;
		justify-content: center !important;
		width: 61px !important;
		height: 44px !important;
		flex-shrink: 0 !important;
		text-decoration: none !important;
		line-height: 1 !important;
		transition: opacity 0.2s ease !important;
	}

	.ocx-header--ecosystem .ocx-header__signin:hover {
		opacity: 0.75 !important;
	}

	.ocx-header--ecosystem .ocx-header__signin img {
		width: 61px !important;
		height: 44px !important;
		display: block !important;
	}

	.ocx-header--ecosystem .ocx-btn--meet {
		display: inline-flex !important;
		align-items: center !important;
		justify-content: center !important;
		min-width: 129px !important;
		height: 44px !important;
		padding: 10px 24px !important;
		background: var(--Color-OpenCX-Dune, #B69E52) !important;
		color: var(--Color-OpenCX-White, #FCFBF9) !important;
		border-radius: 0px !important;
		border: 1px solid var(--Color-OpenCX-Dune, #B69E52) !important;
		font-family: var(--wp--preset--font-family--widescreen, 'Widescreen', sans-serif) !important;
		font-size: 16px !important;
		font-weight: 300 !important;
		line-height: 24px !important;
		letter-spacing: 0px !important;
		text-decoration: none !important;
		white-space: nowrap !important;
		box-sizing: border-box !important;
		cursor: pointer !important;
		transition: background-color 0.2s ease, opacity 0.2s ease !important;
	}

	.ocx-header--ecosystem .ocx-btn--meet:hover {
		background-color: #9d8743 !important;
		border-color: #9d8743 !important;
		opacity: 0.95 !important;
	}

	.ocx-header--ecosystem .ocx-mobile-toggle {
		display: none !important;
	}

	.ocx-header--ecosystem .ocx-mobile-drawer {
		display: none !important;
	}
}

:is(.ocx-h62__actions, .ocx-h62b__actions, .ocx-i62__actions) .wp-block-button.ocx-btn--primary .wp-block-button__link {
	border: 1px solid var(--Color-Husk);
	color: #ffffff;
	font-weight: 500;
}

/*
 * Figma "Header / 62 /" (#10218:66853), el hero de `Ecosystem`, y sus hijos.
 *
 * La caja sale de la cadena `.ocx-section` que ya existe: `--stretch` aporta el
 * `align-self:stretch` y el `align-items:stretch`, `--large` sube el padding
 * vertical al token de 112px, y `.ocx-section` ya trae el fondo
 * `--Color-Scheme-1-Background`. De los cuatro valores que da el nodo, el
 * `gap:80px` llega por el atributo `blockGap` del bloque y el `flex-direction:column`
 * por `layout.orientation`, asi que aqui solo quedan el padding y el `align-items`.
 *
 * El padding va con dos clases, (0,2,0), y no confiando en el orden: `.ocx-section`
 * y `.ocx-section--large` son (0,1,0) los dos, y los tokens saltan a valores de
 * telefono dentro de `@media (max-width: 1199.98px)` en `tokens.css`
 * (`--Section-Padding-padding-section-large: 64px`, `--Page-Padding-padding-global: 20px`),
 * con lo que la cadena sola bajaria la seccion a 64/20 por debajo de 1200. Figma no
 * define frame movil para este frame, asi que los tres valores van fijos en todos los
 * anchos, que es el mismo criterio que `.ocx-c25__section`.
 *
 * **El bottom es 16px y no 112px.** El nodo declara `padding 112px 64px`, pero el bottom
 * pedido es 16, asi que el shorthand de tres valores deja `112 / 64 / 16`. Como el bloque
 * va pegado a "Layout / 71 /" (que arranca con 60px de top), lo que se busca es que el aire
 * entre las dos secciones sea el del bloque de abajo, no el del hero. Verificado: el alto
 * del hero baja 96px exactos en los siete anchos, que es `112 - 16`.
 *
 * El `style.spacing.padding` del atributo del bloque **no sirve aca**: en los
 * `.ocx-section` core lo descarta en silencio y el rendered llega con
 * `style="margin-top:0;margin-bottom:0"` y sin padding. Solo el hero de la home,
 * que es `layout: default`, recibe el suyo.
 */
/*
 * Ecosystem Hero (Figma 12649-737: "Hero - Ecosystem")
 *
 * Mental model: Auto Layout fluid scaling from 1440px desktop to tablets and mobile.
 * Outer section: padding 0 80px 80px (fluid).
 * Container: max-width 1280px, background #FCFBF9, border 0.5px solid #CBBB85, radius 20px, padding 80px.
 * Card: 2-column grid on desktop (1.25fr 1fr), stacked column on tablet and mobile.
 * Typography: H1 55px (desktop) / 36px (mobile) with "The foundation." in gold #B69E52.
 * Graphic: 532x382px high-res illustration.
 */

.ocx-section.ocx-h62__section {
	width: 100% !important;
	max-width: 100% !important;
	box-sizing: border-box !important;
	background-color: var(--Color-OpenCX-White, #FCFBF9) !important;
	padding: 0 clamp(24px, 5.5vw, 80px) 0 !important;
	display: flex !important;
	flex-direction: column !important;
	align-items: center !important;
	justify-content: center !important;
}

.ocx-h62__outer {
	width: 100% !important;
	max-width: 1280px !important;
	min-height: 600px !important;
	margin: 0 auto !important;
	border: var(--Stroke-Hairline, 0.5px) solid var(--Color-OpenCX-Dune-Light, #CBBB85) !important;
	background: var(--Color-OpenCX-Lighter, #B1C9D3) !important;
	box-sizing: border-box !important;
	display: flex !important;
	flex-direction: column !important;
	align-items: center !important;
	justify-content: flex-start !important;
}

.ocx-h62__container {
	position: relative !important;
	display: flex !important;
	width: calc(100% + 2px) !important;
	min-height: 600px !important;
	margin: -1px !important;
	border-radius: var(--Radius-Medium, 20px) !important;
	border: var(--Stroke-Hairline, 0.5px) solid var(--Color-OpenCX-Dune-Light, #CBBB85) !important;
	background: var(--Color-OpenCX-White, #FCFBF9) !important;
	padding: 80px !important;
	box-sizing: border-box !important;
	flex-direction: column !important;
	align-items: center !important;
	justify-content: center !important;
}

.ocx-h62__card {
	width: 100% !important;
	max-width: 1120px !important;
	display: grid !important;
	grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr) !important;
	gap: 33px !important;
	align-items: center !important;
	box-sizing: border-box !important;
}

.ocx-h62__col-content {
	display: flex !important;
	flex-direction: column !important;
	gap: 32px !important;
	align-items: flex-start !important;
	justify-content: center !important;
	width: 100% !important;
}

.ocx-h62__text-group {
	display: flex !important;
	flex-direction: column !important;
	gap: 24px !important;
	width: 100% !important;
}

.ocx-h62__heading {
	margin: 0 !important;
	font-family: var(--wp--preset--font-family--widescreen, 'Widescreen', sans-serif) !important;
	font-size: 55px !important;
	font-weight: 400 !important;
	line-height: 1.05 !important;
	letter-spacing: -0.01em !important;
	color: #162227 !important;
	text-align: left !important;
}

.ocx-h62__heading-gold {
	display: block !important;
	font-family: var(--wp--preset--font-family--widescreen-ex, 'widescreen-ex', sans-serif) !important;
	color: var(--Color-OpenCX-Dune, #B69E52) !important;
	letter-spacing: -0.03em !important;
	font-weight: 400 !important;
}

.ocx-h62__paragraph {
	margin: 0 !important;
	font-family: var(--wp--preset--font-family--widescreen, 'Widescreen', sans-serif) !important;
	font-size: 18px !important;
	font-weight: 300 !important;
	line-height: 1.5 !important;
	color: #162227 !important;
	text-align: left !important;
}

.ocx-h62__actions {
	display: flex !important;
	flex-direction: row !important;
	gap: 16px !important;
	align-items: center !important;
}

.ocx-btn--secondary-hero {
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	height: 44px !important;
	padding: 10px 24px !important;
	background-color: var(--Color-OpenCX-Dune-Lighter, #F0EBDC) !important;
	border: 1px solid var(--Color-OpenCX-Dune-Light, #CBBB85) !important;
	border-radius: 0px !important;
	color: var(--Color-OpenCX-Dune, #B69E52) !important;
	font-family: var(--wp--preset--font-family--widescreen, 'Widescreen', sans-serif) !important;
	font-size: 16px !important;
	font-weight: 300 !important;
	line-height: 24px !important;
	letter-spacing: 0px !important;
	text-decoration: none !important;
	white-space: nowrap !important;
	box-sizing: border-box !important;
	cursor: pointer !important;
	transition: background-color 0.2s ease, opacity 0.2s ease !important;
}

.ocx-btn--secondary-hero:hover {
	background-color: #e5ded0 !important;
	opacity: 0.95 !important;
}

.ocx-h62__col-graphic {
	display: flex !important;
	justify-content: center !important;
	align-items: center !important;
	width: 100% !important;
}

.ocx-h62__img {
	width: 100% !important;
	max-width: 532px !important;
	height: auto !important;
	display: block !important;
	object-fit: contain !important;
}

/* -------------------------------------------------------------------------
 * Responsive Auto Layout Breakpoints
 * ------------------------------------------------------------------------- */

/* Desktop Small & Tablets Landscape (992px to 1199px) */
@media (min-width: 992px) and (max-width: 1199.98px) {
	.ocx-h62__container {
		padding: 48px !important;
	}

	.ocx-h62__card {
		grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr) !important;
		gap: 24px !important;
	}

	.ocx-h62__heading {
		font-size: clamp(42px, 3.8vw, 48px) !important;
	}

	.ocx-h62__paragraph {
		font-size: 17px !important;
	}

	.ocx-h62__img {
		max-width: 460px !important;
	}
}

/* Tablets Portrait (768px to 991px) */
@media (min-width: 768px) and (max-width: 991.98px) {
	.ocx-section.ocx-h62__section {
		padding: var(--Section-Padding-padding-section-xsmall, 16px) 10px 0 10px !important;
	}

	.ocx-h62__outer {
		width: 100% !important;
		max-width: 100% !important;
		height: auto !important;
		min-height: auto !important;
		margin: 0 auto !important;
		background: var(--Color-OpenCX-Lighter, #B1C9D3) !important;
		border: var(--Stroke-Hairline, 0.5px) solid var(--Color-OpenCX-Dune-Light, #CBBB85) !important;
		border-radius: 0 !important;
		box-sizing: border-box !important;
	}

	.ocx-h62__container {
		width: calc(100% + 1px) !important;
		max-width: none !important;
		height: auto !important;
		min-height: auto !important;
		margin: -0.5px !important;
		padding: 40px 32px !important;
		border: var(--Stroke-Hairline, 0.5px) solid var(--Color-OpenCX-Dune-Light, #CBBB85) !important;
		border-radius: var(--Radius-Small, 16px) !important;
		background: var(--Color-OpenCX-White, #FCFBF9) !important;
		box-sizing: border-box !important;
	}

	.ocx-h62__card {
		display: flex !important;
		flex-direction: column !important;
		gap: 36px !important;
		align-items: stretch !important;
	}

	.ocx-h62__col-content {
		align-items: flex-start !important;
	}

	.ocx-h62__heading {
		font-size: clamp(36px, 4.5vw, 42px) !important;
	}

	.ocx-h62__paragraph {
		font-size: 16px !important;
	}

	.ocx-h62__img {
		max-width: 440px !important;
		margin: 0 auto !important;
	}
}

/* Mobile Portrait & Landscape (<= 767px) */
@media (max-width: 767.98px) {
	.ocx-section.ocx-h62__section {
		padding: var(--Section-Padding-padding-section-xsmall, 16px) 10px 0 10px !important;
	}

	.ocx-h62__outer {
		width: 100% !important;
		max-width: 100% !important;
		height: auto !important;
		min-height: auto !important;
		margin: 0 auto !important;
		background: var(--Color-OpenCX-Lighter, #B1C9D3) !important;
		border: var(--Stroke-Hairline, 0.5px) solid var(--Color-OpenCX-Dune-Light, #CBBB85) !important;
		border-radius: 0 !important;
		box-sizing: border-box !important;
	}

	.ocx-h62__container {
		width: calc(100% + 1px) !important;
		max-width: none !important;
		height: auto !important;
		min-height: auto !important;
		margin: -0.5px !important;
		padding: 36px 20px 48px 20px !important;
		border: var(--Stroke-Hairline, 0.5px) solid var(--Color-OpenCX-Dune-Light, #CBBB85) !important;
		border-radius: var(--Radius-Medium, 20px) !important;
		background: var(--Color-OpenCX-White, #FCFBF9) !important;
		box-sizing: border-box !important;
	}

	.ocx-h62__card {
		display: flex !important;
		flex-direction: column !important;
		width: 100% !important;
		gap: 0 !important;
	}

	.ocx-h62__col-content {
		display: contents !important;
	}

	.ocx-h62__text-group {
		order: 1 !important;
		display: flex !important;
		flex-direction: column !important;
		gap: 16px !important;
		width: 100% !important;
	}

	.ocx-h62__heading {
		font-size: 38px !important;
		line-height: 1.1em !important;
		letter-spacing: -0.01em !important;
		margin: 0 !important;
		text-align: left !important;
	}

	.ocx-h62__heading-gold {
		display: block !important;
		font-family: var(--wp--preset--font-family--widescreen-ex, 'widescreen-ex', sans-serif) !important;
		color: var(--Color-OpenCX-Dune, #B69E52) !important;
		letter-spacing: -0.03em !important;
	}

	.ocx-h62__paragraph {
		font-family: 'Manrope', var(--wp--preset--font-family--manrope, sans-serif) !important;
		font-size: 16px !important;
		font-weight: 300 !important;
		line-height: 1.5em !important;
		color: #000000 !important;
		margin: 0 !important;
		text-align: left !important;
	}

	.ocx-h62__col-graphic {
		order: 2 !important;
		display: flex !important;
		width: 100% !important;
		max-width: 100% !important;
		height: auto !important;
		justify-content: center !important;
		align-items: center !important;
		margin: 32px 0 32px 0 !important;
	}

	.ocx-h62__img {
		width: 100% !important;
		max-width: 320px !important;
		height: auto !important;
		display: block !important;
		margin: 0 auto !important;
		object-fit: contain !important;
	}

	.ocx-h62__actions {
		order: 3 !important;
		display: flex !important;
		width: 100% !important;
		justify-content: center !important;
		align-items: center !important;
		margin: 0 auto !important;
	}

	.ocx-h62__actions .ocx-btn--secondary-hero,
	.ocx-btn--secondary-hero {
		display: inline-flex !important;
		width: auto !important;
		padding: 12px 28px !important;
		justify-content: center !important;
		align-items: center !important;
		gap: 8px !important;
		border: 1px solid var(--Color-OpenCX-Dune-Light, #CBBB85) !important;
		background: var(--Color-OpenCX-Dune-Lighter, #F0EBDC) !important;
		border-radius: 0px !important;
		color: var(--Color-OpenCX-Dune, #B69E52) !important;
		font-family: var(--wp--preset--font-family--widescreen, 'Widescreen', sans-serif) !important;
		font-size: 16px !important;
		font-weight: 300 !important;
		line-height: 1.5em !important;
		letter-spacing: 0px !important;
		text-decoration: none !important;
		box-sizing: border-box !important;
		cursor: pointer !important;
	}
}

/* Mobile Landscape special handling */
@media (max-width: 991.98px) and (orientation: landscape) {
	.ocx-h62__container {
		padding: 24px !important;
	}

	.ocx-h62__img {
		max-width: 260px !important;
	}
}

/*
 * ==========================================================================
 * Ecosystem: AI OS - How it works (Figma node #12649:750)
 * ==========================================================================
 * Layout 2-col with sticky sidebar navigation and continuous feature feed.
 * Fully auto-layout responsive from 1440px desktop down to 390px mobile.
 */

.ocx-section.ocx-aios__section {
	width: 100% !important;
	max-width: 100% !important;
	padding: 0 clamp(24px, 5.5vw, 80px) 0 !important;
	background-color: var(--Color-OpenCX-White, #FCFBF9) !important;
	align-items: center !important;
	box-sizing: border-box !important;
	display: flex !important;
	flex-direction: column !important;
}

@media (max-width: 1200px) {
	.ocx-section.ocx-aios__section {
		padding: 0 40px 0 !important;
	}
}

@media (max-width: 767px) {
	.ocx-section.ocx-aios__section {
		padding: 0 10px 0 !important;
	}
}

.ocx-aios__outer {
	width: 100% !important;
	max-width: 1280px !important;
	min-height: 1672px !important;
	margin: 0 auto !important;
	margin-top: calc(-1 * var(--Stroke-Hairline, 0.5px)) !important;
	border: var(--Stroke-Hairline, 0.5px) solid var(--Color-OpenCX-Dune-Light, #CBBB85) !important;
	background: var(--Color-OpenCX-Lighter, #B1C9D3) !important;
	box-sizing: border-box !important;
	display: flex !important;
	flex-direction: column !important;
	align-items: center !important;
}

.ocx-aios__container {
	position: relative !important;
	display: flex !important;
	width: calc(100% + 2px) !important;
	min-height: 1672px !important;
	margin: -1px !important;
	border-radius: var(--Radius-Medium, 20px) !important;
	border: var(--Stroke-Hairline, 0.5px) solid var(--Color-OpenCX-Dune-Light, #CBBB85) !important;
	background: var(--Color-OpenCX-White, #FCFBF9) !important;
	padding: var(--Section-Padding-padding-section-large, 112px) var(--Section-Padding-padding-section-medium, 80px) !important;
	box-sizing: border-box !important;
	flex-direction: column !important;
	align-items: flex-start !important;
	gap: 80px !important;
}

@media (max-width: 1200px) {
	.ocx-h62__outer,
	.ocx-aios__outer,
	.ocx-h62__container,
	.ocx-aios__container {
		min-height: auto !important;
	}

	.ocx-aios__outer {
		width: 100% !important;
		max-width: 100% !important;
		margin: calc(-1 * var(--Stroke-Hairline, 0.5px)) auto 0 !important;
		background: var(--Color-OpenCX-Lighter, #B1C9D3) !important;
		border: var(--Stroke-Hairline, 0.5px) solid var(--Color-OpenCX-Dune-Light, #CBBB85) !important;
		border-radius: 0 !important;
		box-sizing: border-box !important;
	}

	.ocx-aios__container {
		width: calc(100% + 1px) !important;
		max-width: none !important;
		margin: -0.5px !important;
		padding: 80px 48px !important;
		border: var(--Stroke-Hairline, 0.5px) solid var(--Color-OpenCX-Dune-Light, #CBBB85) !important;
		border-radius: var(--Radius-Small, 16px) !important;
		background: var(--Color-OpenCX-White, #FCFBF9) !important;
		box-sizing: border-box !important;
		gap: 60px !important;
	}
}

@media (max-width: 991px) {
	.ocx-aios__outer {
		margin: calc(-1 * var(--Stroke-Hairline, 0.5px)) auto 0 !important;
		background: var(--Color-OpenCX-Lighter, #B1C9D3) !important;
		border: var(--Stroke-Hairline, 0.5px) solid var(--Color-OpenCX-Dune-Light, #CBBB85) !important;
		border-radius: 0 !important;
	}

	.ocx-aios__container {
		width: calc(100% + 1px) !important;
		max-width: none !important;
		margin: -0.5px !important;
		padding: 60px 32px !important;
		border: var(--Stroke-Hairline, 0.5px) solid var(--Color-OpenCX-Dune-Light, #CBBB85) !important;
		border-radius: var(--Radius-Small, 16px) !important;
		background: var(--Color-OpenCX-White, #FCFBF9) !important;
		box-sizing: border-box !important;
		gap: 40px !important;
	}
}

@media (max-width: 767px) {
	.ocx-aios__outer {
		margin: calc(-1 * var(--Stroke-Hairline, 0.5px)) auto 0 !important;
		background: var(--Color-OpenCX-Lighter, #B1C9D3) !important;
		border: var(--Stroke-Hairline, 0.5px) solid var(--Color-OpenCX-Dune-Light, #CBBB85) !important;
		border-radius: 0 !important;
	}

	.ocx-aios__container {
		width: calc(100% + 1px) !important;
		max-width: none !important;
		margin: -0.5px !important;
		padding: 40px 20px !important;
		border: var(--Stroke-Hairline, 0.5px) solid var(--Color-OpenCX-Dune-Light, #CBBB85) !important;
		border-radius: var(--Radius-Small, 16px) !important;
		background: var(--Color-OpenCX-White, #FCFBF9) !important;
		box-sizing: border-box !important;
		gap: 32px !important;
	}
}

.ocx-aios__card {
	display: grid;
	grid-template-columns: 280px minmax(0, 1fr);
	gap: 64px;
	align-items: start;
	width: 100%;
	box-sizing: border-box;
}

@media (max-width: 991px) {
	.ocx-aios__card {
		display: flex;
		flex-direction: column;
		gap: 40px;
	}
}

/* Sidebar & Navigation */
.ocx-aios__sidebar {
	position: sticky;
	top: 120px;
	align-self: start;
	width: 100%;
	box-sizing: border-box;
}

.ocx-aios__nav {
	display: flex;
	flex-direction: column;
	gap: 16px;
}

.ocx-aios__nav-item {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	font-family: var(--wp--preset--font-family--widescreen, "Manrope", sans-serif);
	font-size: 18px;
	line-height: 1.5;
	font-weight: 400;
	color: #426676;
	text-decoration: none;
	transition: color 0.2s ease, opacity 0.2s ease, background-color 0.2s ease;
	cursor: pointer;
}

.ocx-aios__nav-item:hover {
	color: #162227;
}

.ocx-aios__nav-item.is-active {
	color: #4A2B4F;
	font-weight: 600;
}

.ocx-aios__nav-icon {
	width: 20px;
	height: 12px;
	object-fit: contain;
	display: inline-block;
	flex-shrink: 0;
	transition: transform 0.2s ease;
}

@media (max-width: 991px) {
	.ocx-aios__sidebar {
        width: 100% !important;
		position: sticky;
		top: 0 !important;
		z-index: 100 !important;
		background: #FCFBF9;
		padding: 32px 0;
		border-bottom: 1px solid rgba(177, 201, 211, 0.4);
	}

	.ocx-aios__nav {
		flex-direction: row;
		overflow-x: auto;
		white-space: nowrap;
		scrollbar-width: none;
		-webkit-overflow-scrolling: touch;
		gap: 10px;
	}

	.ocx-aios__nav::-webkit-scrollbar {
		display: none;
	}

	.ocx-aios__nav-item {
		padding: 8px 18px;
		border-radius: 9999px;
		background: rgba(177, 201, 211, 0.15);
		font-size: 15px;
	}

	.ocx-aios__nav-item.is-active {
		background: #4A2B4F;
		color: #FFFFFF;
	}

	.ocx-aios__nav-item.is-active .ocx-aios__nav-icon {
		filter: brightness(0) invert(1);
	}
}

/* Feed & Articles */
.ocx-aios__feed {
	display: flex;
	flex-direction: column;
	gap: 100px;
	width: 100%;
	min-width: 0;
}

@media (max-width: 991px) {
	.ocx-aios__feed {
		gap: 64px;
	}
}

@media (max-width: 767px) {
	.ocx-aios__feed {
		gap: 48px;
	}
}

.ocx-aios__block {
	display: flex;
	flex-direction: column;
	scroll-margin-top: 140px;
	width: 100%;
	box-sizing: border-box;
}

@media (max-width: 991px) {
	.ocx-aios__block {
		scroll-margin-top: 104px;
	}
}

.ocx-aios__block-top {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 40px;
	width: 100%;
	box-sizing: border-box;
}

@media (max-width: 640px) {
	.ocx-aios__block-top {
		flex-direction: column-reverse;
		align-items: flex-start;
		gap: 24px;
	}
}

.ocx-aios__title {
	font-family: var(--wp--preset--font-family--widescreen, "Manrope", sans-serif);
	font-size: 36px;
	font-weight: 300;
	line-height: 1.25;
	letter-spacing: -0.02em;
	color: #162227;
	margin: 0;
	flex: 1 1 auto;
	max-width: 480px;
}

@media (max-width: 1200px) {
	.ocx-aios__title {
		font-size: 32px;
	}
}

@media (max-width: 767px) {
	.ocx-aios__title {
		font-size: 26px;
		line-height: 1.3;
	}
}

.ocx-aios__graphic-wrap {
	flex: 0 0 auto;
	display: flex;
	align-items: center;
	justify-content: center;
}

.ocx-aios__graphic {
	max-width: 224px;
	width: 100%;
	height: auto;
	object-fit: contain;
	display: block;
}

@media (max-width: 640px) {
	.ocx-aios__graphic {
		max-width: 180px;
	}
}

.ocx-aios__desc-wrap {
	padding: 80px 0 20px;
	border-bottom: 1px solid #B1C9D3;
	width: 100%;
	box-sizing: border-box;
}

@media (max-width: 991px) {
	.ocx-aios__desc-wrap {
		padding: 48px 0 20px;
	}
}

@media (max-width: 767px) {
	.ocx-aios__desc-wrap {
		padding: 32px 0 16px;
	}
}

.ocx-aios__desc-wrap.ocx-aios__desc-wrap--last {
	border-bottom: none;
	padding-bottom: 0;
}

.ocx-aios__desc {
	font-family: var(--wp--preset--font-family--widescreen, "Manrope", sans-serif);
	font-size: 18px;
	font-weight: 300;
	line-height: 1.6;
	color: #162227;
	margin: 0;
	max-width: 720px;
}

@media (max-width: 767px) {
	.ocx-aios__desc {
		font-size: 16px;
		line-height: 1.55;
	}
}

/*
 * ==========================================================================
 * Shared Ecosystem Helpers
 * ==========================================================================
 */
.ocx-color-gold {
	color: #B69E52 !important;
}

.ocx-bracket {
	color: #B69E52;
	font-weight: 300;
	display: inline-block;
	margin: 0 4px;
}

/*
 * ==========================================================================
 * Ecosystem: Four pillars / CAPABILITIES (Figma node #12649:792)
 * ==========================================================================
 */
.ocx-section.ocx-eco-pillars__section {
	width: 100% !important;
	max-width: 100% !important;
	padding: 0 clamp(24px, 5.5vw, 80px) 0 !important;
	background-color: var(--Color-OpenCX-White, #FCFBF9) !important;
	align-items: center !important;
	box-sizing: border-box !important;
	display: flex !important;
	flex-direction: column !important;
}

@media (max-width: 1200px) {
	.ocx-section.ocx-eco-pillars__section {
		padding: 0 40px 0 !important;
	}
}

@media (max-width: 767px) {
	.ocx-section.ocx-eco-pillars__section {
		padding: 0 10px 0 !important;
	}
}

.ocx-eco-pillars__outer {
	width: 100% !important;
	max-width: 1280px !important;
	height: auto !important;
	min-height: auto !important;
	margin: 0 auto !important;
	border: var(--Stroke-Hairline, 0.5px) solid #426676 !important;
	background: #E5EDF0 !important;
	box-sizing: border-box !important;
	display: flex !important;
	flex-direction: column !important;
	align-items: center !important;
}

.ocx-eco-pillars__card {
	position: relative !important;
	display: flex !important;
	width: calc(100% + 2px) !important;
	max-width: calc(100% + 2px) !important;
	height: auto !important;
	min-height: auto !important;
	margin: -1px !important;
	padding: var(--Section-Padding-padding-section-medium, 80px) 0 !important;
	flex-direction: column !important;
	justify-content: center !important;
	align-items: center !important;
	gap: var(--Page-Padding-padding-global, 64px) !important;
	flex-shrink: 0 !important;
	border-radius: var(--Radius-Medium, 20px) !important;
	border: var(--Stroke-Hairline, 0.5px) solid var(--Color-OpenCX-Dune-Light, #CBBB85) !important;
	background: var(--Color-OpenCX-Dune-Lightest, #F8F6F0) !important;
	box-sizing: border-box !important;
}

@media (max-width: 1200px) {
	.ocx-eco-pillars__outer {
		height: auto !important;
		min-height: auto !important;
		width: 100% !important;
		max-width: 100% !important;
		margin: calc(-1 * var(--Stroke-Hairline, 0.5px)) auto 0 !important;
		background: #E5EDF0 !important;
		border: var(--Stroke-Hairline, 0.5px) solid var(--Color-OpenCX-Dune-Light, #CBBB85) !important;
		border-radius: 0 !important;
		box-sizing: border-box !important;
	}

	.ocx-eco-pillars__card {
		height: auto !important;
		min-height: auto !important;
		width: calc(100% + 1px) !important;
		max-width: none !important;
		margin: -0.5px !important;
		border: var(--Stroke-Hairline, 0.5px) solid var(--Color-OpenCX-Dune-Light, #CBBB85) !important;
		border-radius: var(--Radius-Small, 16px) !important;
		background: var(--Color-OpenCX-Dune-Lightest, #F8F6F0) !important;
		box-sizing: border-box !important;
		padding: 60px 0 !important;
		gap: 48px !important;
	}
}

@media (max-width: 991px) {
	.ocx-eco-pillars__outer {
		margin: calc(-1 * var(--Stroke-Hairline, 0.5px)) auto 0 !important;
		background: #E5EDF0 !important;
		border: var(--Stroke-Hairline, 0.5px) solid var(--Color-OpenCX-Dune-Light, #CBBB85) !important;
		border-radius: 0 !important;
	}

	.ocx-eco-pillars__card {
		padding: 48px 0 !important;
		border: var(--Stroke-Hairline, 0.5px) solid var(--Color-OpenCX-Dune-Light, #CBBB85) !important;
		border-radius: var(--Radius-Small, 16px) !important;
		background: var(--Color-OpenCX-Dune-Lightest, #F8F6F0) !important;
		width: calc(100% + 1px) !important;
		margin: -0.5px !important;
		gap: 40px !important;
	}
}

@media (max-width: 767px) {
	.ocx-eco-pillars__outer {
		margin: calc(-1 * var(--Stroke-Hairline, 0.5px)) auto 0 !important;
		background: #E5EDF0 !important;
		border: var(--Stroke-Hairline, 0.5px) solid var(--Color-OpenCX-Dune-Light, #CBBB85) !important;
		border-radius: 0 !important;
	}

	.ocx-eco-pillars__card {
		padding: 40px 0 !important;
		border: var(--Stroke-Hairline, 0.5px) solid var(--Color-OpenCX-Dune-Light, #CBBB85) !important;
		border-radius: var(--Radius-Small, 16px) !important;
		background: var(--Color-OpenCX-Dune-Lightest, #F8F6F0) !important;
		width: calc(100% + 1px) !important;
		margin: -0.5px !important;
		gap: 36px !important;
	}
}

.ocx-eco-pillars__header {
	display: flex !important;
	flex-direction: column !important;
	align-items: center !important;
	text-align: center !important;
	gap: 24px !important;
	max-width: 1000px !important;
	width: 100% !important;
	padding: 0 24px !important;
	box-sizing: border-box !important;
}

.ocx-eco-pillars__title {
	font-family: var(--wp--preset--font-family--widescreen, 'Widescreen', sans-serif) !important;
	font-size: 55px !important;
	font-weight: 400 !important;
	line-height: 1.05 !important;
	letter-spacing: -0.01em !important;
	color: #162227 !important;
	margin: 0 !important;
	text-align: center !important;
}

.ocx-eco-pillars__title .ocx-color-gold {
	display: inline-block !important;
	font-family: var(--wp--preset--font-family--widescreen-ex, 'widescreen-ex', sans-serif) !important;
	color: var(--Color-OpenCX-Dune, #B69E52) !important;
	letter-spacing: -0.03em !important;
	font-weight: 400 !important;
	white-space: nowrap !important;
}

@media (max-width: 1200px) {
	.ocx-eco-pillars__title {
		font-size: 42px !important;
	}
}

@media (max-width: 767px) {
	.ocx-eco-pillars__title {
		font-size: 30px !important;
	}

	.ocx-eco-pillars__title .ocx-color-gold {
		white-space: normal !important;
	}
}

.ocx-eco-pillars__subtitle {
	font-family: var(--wp--preset--font-family--widescreen, 'Widescreen', sans-serif) !important;
	font-size: 18px !important;
	font-weight: 300 !important;
	line-height: 1.5 !important;
	color: #162227 !important;
	margin: 0 !important;
	text-align: center !important;
	max-width: 768px !important;
	padding: 0 16px !important;
	box-sizing: border-box !important;
}

@media (max-width: 767px) {
	.ocx-eco-pillars__subtitle {
		font-size: 16px !important;
	}
}

.ocx-eco-pillars__grid {
	display: grid !important;
	grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
	gap: 40px !important;
	width: 100% !important;
	max-width: 1280px !important;
	padding: 0 48px !important;
	box-sizing: border-box !important;
}

@media (max-width: 991px) {
	.ocx-eco-pillars__grid {
		grid-template-columns: 1fr !important;
		gap: 24px !important;
		padding: 0 24px !important;
	}
}

@media (max-width: 767px) {
	.ocx-eco-pillars__grid {
		padding: 0 16px !important;
	}
}

.ocx-eco-pillar-card {
	display: flex !important;
	height: 628.5px !important;
	padding: var(--Section-Padding-padding-section-small, 48px) !important;
	flex-direction: column !important;
	align-items: flex-start !important;
	gap: var(--Section-Padding-padding-section-medium, 80px) !important;
	grid-row: span 1 !important;
	grid-column: span 1 !important;
	justify-self: stretch !important;
	border-radius: var(--Radius-Medium, 20px) !important;
	border: var(--Stroke-Hairline, 0.5px) solid var(--Color-OpenCX-Dune-Light, #CBBB85) !important;
	background: var(--Color-OpenCX-White, #FCFBF9) !important;
	box-sizing: border-box !important;
	transition: transform 0.2s ease, box-shadow 0.2s ease !important;
}

@media (max-width: 1200px) {
	.ocx-eco-pillar-card {
		height: auto !important;
	}
}

@media (max-width: 991px) {
	.ocx-eco-pillar-card {
		padding: 32px 24px !important;
		gap: 40px !important;
	}
}

@media (max-width: 767px) {
	.ocx-eco-pillar-card {
		padding: 24px 20px !important;
		gap: 32px !important;
	}
}

.ocx-eco-pillar-card:hover {
	transform: translateY(-2px) !important;
	box-shadow: 0 8px 24px rgba(0, 0, 0, 0.04) !important;
}

.ocx-eco-pillar-card__top {
	display: flex !important;
	align-items: flex-start !important;
	justify-content: space-between !important;
	gap: 16px !important;
	width: 100% !important;
	box-sizing: border-box !important;
}

.ocx-eco-pillar-card__tagline-wrapper {
	display: flex !important;
	flex-direction: column !important;
	align-items: flex-start !important;
	gap: 0 !important;
}

.ocx-eco-pillar-card__frame-num {
	display: inline-flex !important;
	align-items: center !important;
	height: 33px !important;
	gap: 0 !important;
}

.ocx-eco-pillar-card__bracket {
	width: 24px !important;
	height: 24px !important;
	flex-shrink: 0 !important;
	color: var(--Color-OpenCX-Dune, #B69E52) !important;
	display: block !important;
}

.ocx-eco-pillar-card__num {
	font-family: var(--wp--preset--font-family--widescreen, 'Widescreen', sans-serif) !important;
	font-size: 22px !important;
	font-weight: 400 !important;
	line-height: 33px !important;
	color: var(--Color-Deep-Blue, #162227) !important;
	text-align: center !important;
	display: inline-block !important;
	min-width: 14px !important;
}

.ocx-eco-pillar-card__name {
	font-family: var(--wp--preset--font-family--widescreen, 'Widescreen', sans-serif) !important;
	font-size: 22px !important;
	font-weight: 400 !important;
	line-height: 33px !important;
	color: var(--Color-Deep-Blue, #162227) !important;
	white-space: nowrap !important;
}

.ocx-eco-pillar-card__icon-wrap {
	flex-shrink: 0 !important;
	width: 100px !important;
	height: 100px !important;
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
}

.ocx-eco-pillar-card__icon {
	width: 100px !important;
	height: 100px !important;
	object-fit: contain !important;
	display: block !important;
}

@media (max-width: 767px) {
	.ocx-eco-pillar-card__icon-wrap,
	.ocx-eco-pillar-card__icon {
		width: 72px !important;
		height: 72px !important;
	}
}

.ocx-eco-pillar-card__body {
	display: flex !important;
	flex-direction: column !important;
	gap: 24px !important;
	width: 100% !important;
	box-sizing: border-box !important;
}

.ocx-eco-pillar-card__title {
	font-family: var(--wp--preset--font-family--widescreen, 'Widescreen', sans-serif) !important;
	font-size: 36px !important;
	font-weight: 300 !important;
	line-height: 1.3 !important;
	letter-spacing: -0.01em !important;
	color: #162227 !important;
	margin: 0 !important;
}

@media (max-width: 767px) {
	.ocx-eco-pillar-card__title {
		font-size: 26px !important;
	}
}

.ocx-eco-pillar-card__text {
	font-family: var(--wp--preset--font-family--manrope, 'Manrope', sans-serif) !important;
	font-size: 18px !important;
	font-weight: 300 !important;
	line-height: 1.5 !important;
	color: #162227 !important;
	margin: 0 !important;
}

@media (max-width: 767px) {
	.ocx-eco-pillar-card__text {
		font-size: 15px !important;
	}
}

.ocx-eco-pillars__actions {
	display: flex !important;
	justify-content: center !important;
	align-items: center !important;
	width: 100% !important;
	margin: 0 !important;
}

.ocx-eco-pillars__btn {
	display: inline-flex !important;
	padding: 10px 24px !important;
	justify-content: center !important;
	align-items: center !important;
	gap: 8px !important;
	border: 1px solid var(--Color-OpenCX-Dune, #B69E52) !important;
	background: var(--Color-OpenCX-Dune, #B69E52) !important;
	border-radius: 0px !important;
	color: var(--Color-OpenCX-White, #FCFBF9) !important;
	font-family: var(--wp--preset--font-family--widescreen, 'Widescreen', sans-serif) !important;
	font-size: 16px !important;
	font-weight: 300 !important;
	line-height: 24px !important;
	letter-spacing: 0px !important;
	text-decoration: none !important;
	white-space: nowrap !important;
	box-sizing: border-box !important;
	cursor: pointer !important;
	transition: background-color 0.2s ease, opacity 0.2s ease !important;
}

.ocx-eco-pillars__btn:hover {
	background: #9d8743 !important;
	border-color: #9d8743 !important;
	color: var(--Color-OpenCX-White, #FCFBF9) !important;
	opacity: 0.95 !important;
}

/*
 * ==========================================================================
 * Ecosystem: Security, Governance & Data Ownership (Figma node #12649:839)
 * ==========================================================================
 */
.ocx-section.ocx-eco-sec__section {
	display: flex !important;
	justify-content: center !important;
	align-items: center !important;
	width: 100% !important;
	padding: 0 !important;
	margin: 0 !important;
	background-color: var(--Color-OpenCX-White, #FCFBF9) !important;
	box-sizing: border-box !important;
}

/* Outer Frame (Figma Container 12649:840: 1280x969, fill #E5EDF0, stroke #1C495A w:0.5) */
.ocx-eco-sec__outer,
.ocx-eco-sec__container {
	display: flex !important;
	width: 100% !important;
	max-width: var(--Container-container-large, 1280px) !important;
	height: 969px !important;
	min-height: 969px !important;
	margin: 0 auto !important;
	border: var(--Stroke-Hairline, 0.5px) solid var(--Color-Nile-Blue, #1C495A) !important;
	background-color: #E5EDF0 !important;
	box-sizing: border-box !important;
	position: relative !important;
}

/* Inner Card (Figma Card 12649:841: 1280x969, r:20px, fill #1C495A, padding 112px 80px) */
.ocx-eco-sec__card {
	display: grid !important;
	grid-template-columns: minmax(0, 560px) minmax(0, 1fr) !important;
	gap: 72px !important;
	align-items: center !important;
	width: 100% !important;
	height: 100% !important;
	min-height: 969px !important;
	box-sizing: border-box !important;
	border-radius: var(--Radius-Medium, 20px) !important;
	background-color: var(--Color-Nile-Blue, #1C495A) !important;
	padding: var(--Section-Padding-padding-section-large, 112px) var(--Section-Padding-padding-section-medium, 80px) !important;
	color: var(--Color-OpenCX-White, #FCFBF9) !important;
}

/* Left Column: 560px */
.ocx-eco-sec__col--text {
	display: flex !important;
	flex-direction: column !important;
	gap: 32px !important;
	width: 100% !important;
	max-width: 560px !important;
	box-sizing: border-box !important;
}

/* Tagline Wrapper (12649:843) */
.ocx-eco-sec__tagline {
	display: inline-flex !important;
	align-items: center !important;
	gap: 6px !important;
	font-family: var(--wp--preset--font-family--widescreen, 'Widescreen', sans-serif) !important;
	font-size: var(--Text-Sizes-Heading-6, 22px) !important;
	font-weight: 400 !important;
	line-height: 33px !important;
	color: #00C9C9 !important;
}

.ocx-eco-sec__tagline .ocx-bracket {
	color: var(--Color-OpenCX-White, #FCFBF9) !important;
	font-size: 22px !important;
	font-weight: 300 !important;
	line-height: 1 !important;
}

.ocx-eco-sec__tagline-text {
	color: #00C9C9 !important;
	letter-spacing: 0px !important;
}

/* Heading (12649:846: 55px Widescreen 400 + 55px Widescreen Ex 400 #00C9C9) */
.ocx-eco-sec__title {
	font-family: var(--wp--preset--font-family--widescreen, 'Widescreen', sans-serif) !important;
	font-size: var(--Text-Sizes-Heading-1-Accent, 55px) !important;
	font-weight: 400 !important;
	line-height: 55px !important;
	letter-spacing: -0.02em !important;
	color: var(--Color-OpenCX-White, #FCFBF9) !important;
	margin: 0 !important;
}

.ocx-eco-sec__title-accent {
	font-family: var(--wp--preset--font-family--widescreen-ex, 'Widescreen Ex', sans-serif) !important;
	color: #00C9C9 !important;
	letter-spacing: -1.65px !important;
	display: inline !important;
}

/* Body Text (12649:847: 18px 400, line-height 27px, color #FCFBF9) */
.ocx-eco-sec__text {
	display: flex !important;
	flex-direction: column !important;
	gap: 24px !important;
	width: 100% !important;
	max-width: 560px !important;
}

.ocx-eco-sec__text p {
	font-family: var(--wp--preset--font-family--widescreen, 'Widescreen', sans-serif) !important;
	font-size: var(--Text-Sizes-Text-Medium, 18px) !important;
	font-weight: 300 !important;
	line-height: 27px !important;
	color: var(--Color-OpenCX-White, #FCFBF9) !important;
	margin: 0 !important;
}

/* Actions Button (12649:849: Let's meet with chevron, 18px Widescreen 400 #B69E52) */
.ocx-eco-sec__actions {
	display: flex !important;
	align-items: center !important;
	margin-top: 0 !important;
}

.ocx-eco-sec__btn {
	display: inline-flex !important;
	align-items: center !important;
	gap: 8px !important;
	font-family: var(--wp--preset--font-family--widescreen, 'Widescreen', sans-serif) !important;
	font-size: var(--Text-Sizes-Text-Medium, 18px) !important;
	font-weight: 400 !important;
	line-height: 27px !important;
	color: var(--Color-OpenCX-Dune, #B69E52) !important;
	text-decoration: none !important;
	transition: opacity 0.2s ease, transform 0.2s ease !important;
}

.ocx-eco-sec__btn:hover {
	opacity: 0.85 !important;
	transform: translateX(4px) !important;
}

/* Right Column Graphic (12649:851 / 12692:1259) */
.ocx-eco-sec__col--graphic {
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	width: 100% !important;
}

.ocx-eco-sec__art {
	max-width: 488px !important;
	width: 100% !important;
	height: auto !important;
	display: block !important;
}

/* Responsive Overrides */
@media (max-width: 1199.98px) {
	.ocx-eco-sec__outer,
	.ocx-eco-sec__container {
		height: auto !important;
		min-height: auto !important;
		padding: 0 !important;
	}

	.ocx-eco-sec__card {
		grid-template-columns: 1fr !important;
		height: auto !important;
		min-height: auto !important;
		padding: var(--Section-Padding-padding-section-large, 64px) var(--Section-Padding-padding-section-medium, 48px) !important;
		gap: var(--Section-Padding-padding-section-small, 48px) !important;
	}

	.ocx-eco-sec__col--text {
		max-width: 100% !important;
	}

	.ocx-eco-sec__title {
		font-size: 40px !important;
		line-height: 44px !important;
	}

	.ocx-eco-sec__col--graphic {
		justify-content: center !important;
	}

	.ocx-eco-sec__art {
		max-width: 440px !important;
	}
}

@media (max-width: 767.98px) {
	.ocx-section.ocx-eco-sec__section {
		padding: 0 10px !important;
	}

	.ocx-eco-sec__outer,
	.ocx-eco-sec__container {
		border-radius: 0 !important;
	}

	.ocx-eco-sec__card {
		padding: var(--Section-Padding-padding-section-large, 64px) var(--Section-Padding-padding-section-small, 32px) !important;
		border-radius: var(--Radius-Small, 16px) !important;
		gap: 32px !important;
	}

	.ocx-eco-sec__tagline {
		font-size: 18px !important;
		line-height: 24px !important;
	}

	.ocx-eco-sec__title {
		font-size: 32px !important;
		line-height: 36px !important;
	}

	.ocx-eco-sec__text {
		gap: 16px !important;
	}

	.ocx-eco-sec__text p {
		font-size: 16px !important;
		line-height: 24px !important;
	}

	.ocx-eco-sec__art {
		max-width: 320px !important;
	}
}

/*
 * ==========================================================================
 * Ecosystem: Data Ownership Comparison (Figma node #12649:860)
 * ==========================================================================
 */
.ocx-section.ocx-eco-compare__section {
	display: flex !important;
	justify-content: center !important;
	align-items: center !important;
	width: 100% !important;
	padding: 0 !important;
	margin: 0 !important;
	background-color: var(--Color-OpenCX-White, #FCFBF9) !important;
	box-sizing: border-box !important;
}

/* Outer Container (Figma 12649:861: 1280x1206, fill #1C495A, border 0.5px solid #426676) */
.ocx-eco-compare__outer,
.ocx-eco-compare__container {
	display: flex !important;
	width: 100% !important;
	max-width: var(--Container-container-large, 1280px) !important;
	height: auto !important;
	min-height: auto !important;
	margin: 0 auto !important;
	border: var(--Stroke-Hairline, 0.5px) solid var(--Color-Deep-Blue-Light, #426676) !important;
	background-color: var(--Color-Nile-Blue, #1C495A) !important;
	box-sizing: border-box !important;
	position: relative !important;
}

/* Inner Card (Figma 12649:862: 1280x1206, r:20px, fill #D1DADE, border 0.5px solid #1C495A, padding 112px 80px, gap 80px) */
.ocx-eco-compare__card {
	display: flex !important;
	flex-direction: column !important;
	align-items: center !important;
	gap: 80px !important;
	width: calc(100% + 2px) !important;
	height: auto !important;
	min-height: auto !important;
	margin: -1px !important;
	box-sizing: border-box !important;
	border-radius: var(--Radius-Medium, 20px) !important;
	background-color: var(--Color-Nile-Blue-Lighter, #D1DADE) !important;
	border: var(--Stroke-Hairline, 0.5px) solid var(--Color-Nile-Blue, #1C495A) !important;
	padding: var(--Section-Padding-padding-section-large, 112px) var(--Section-Padding-padding-section-medium, 80px) !important;
}

/* Header Content (Figma 12649:854: max-width 940px, gap 24px) */
.ocx-eco-compare__header {
	display: flex !important;
	flex-direction: column !important;
	align-items: center !important;
	gap: 24px !important;
	max-width: 940px !important;
	width: 100% !important;
	box-sizing: border-box !important;
	text-align: center !important;
}

/* Heading (Figma 12649:855: 55px Widescreen 400 + 55px Widescreen Ex 400 #917E41) */
.ocx-eco-compare__title {
	font-family: var(--wp--preset--font-family--widescreen, 'Widescreen', sans-serif) !important;
	font-size: var(--Text-Sizes-Heading-1-Accent, 55px) !important;
	font-weight: 400 !important;
	line-height: 55px !important;
	letter-spacing: -0.55px !important;
	color: #162227 !important;
	margin: 0 !important;
	text-align: center !important;
}

.ocx-eco-compare__title-accent {
	font-family: var(--wp--preset--font-family--widescreen-ex, 'Widescreen Ex', sans-serif) !important;
	font-weight: 400 !important;
	letter-spacing: -1.65px !important;
	color: var(--Color-OpenCX-Dune-Dark, #917E41) !important;
}

/* Description (Figma 12649:856: 18px / 27px Widescreen 400, color #162227, text-align left) */
.ocx-eco-compare__desc {
	display: flex !important;
	flex-direction: column !important;
	gap: 20px !important;
	width: 100% !important;
	text-align: left !important;
}

.ocx-eco-compare__desc p {
	font-family: var(--wp--preset--font-family--widescreen, 'Widescreen', sans-serif) !important;
	font-size: var(--Text-Sizes-Text-Medium, 18px) !important;
	font-weight: 300 !important;
	line-height: 27px !important;
	letter-spacing: 0 !important;
	color: #162227 !important;
	margin: 0 !important;
	text-align: left !important;
}

/* Table Wrapper (Figma 12649:863: max-width 940px) */
.ocx-eco-compare__table-wrap {
	width: 100% !important;
	max-width: 940px !important;
	box-sizing: border-box !important;
	overflow-x: auto !important;
	scroll-behavior: smooth !important;
	-webkit-overflow-scrolling: touch !important;
	scrollbar-width: thin;
	scrollbar-color: var(--Color-Nile-Blue, #1C495A) rgba(28, 73, 90, 0.1);
}

.ocx-eco-compare__table-wrap::-webkit-scrollbar {
	height: 6px;
}

.ocx-eco-compare__table-wrap::-webkit-scrollbar-track {
	background: rgba(28, 73, 90, 0.1);
	border-radius: 3px;
}

.ocx-eco-compare__table-wrap::-webkit-scrollbar-thumb {
	background: var(--Color-Nile-Blue, #1C495A);
	border-radius: 3px;
}

/* Table Grid */
.ocx-eco-compare__table {
	width: 100% !important;
	min-width: 720px !important;
	max-width: 940px !important;
	border-collapse: collapse !important;
	border-spacing: 0 !important;
	table-layout: fixed !important;
	margin: 0 auto !important;
}

/* Columns: 325px (34.57%), 307.5px (32.71%), 307.5px (32.71%) */
.ocx-eco-compare__th--spacer,
.ocx-eco-compare__td--label {
	width: 34.57% !important;
}

.ocx-eco-compare__th--trad,
.ocx-eco-compare__td--trad {
	width: 32.71% !important;
}

.ocx-eco-compare__th--ocx,
.ocx-eco-compare__td--ocx {
	width: 32.71% !important;
}

/* Table Rows */
.ocx-eco-compare__tr--head {
	height: 100px !important;
}

.ocx-eco-compare__tr:not(.ocx-eco-compare__tr--head) {
	height: 80px !important;
}

/* Headers */
.ocx-eco-compare__th {
	padding: 0 0 10px 0 !important;
	vertical-align: top !important;
	box-sizing: border-box !important;
}

.ocx-eco-compare__th--spacer {
	border: none !important;
	background: transparent !important;
}

.ocx-eco-compare__th-inner {
	height: 90px !important;
	box-sizing: border-box !important;
	padding: 24px 24px 10px 24px !important;
	display: flex !important;
	align-items: center !important;
}

.ocx-eco-compare__th--trad .ocx-eco-compare__th-inner {
	border-top: var(--Stroke-Hairline, 0.5px) solid var(--Color-Nile-Blue, #1C495A) !important;
	border-left: var(--Stroke-Hairline, 0.5px) solid var(--Color-Nile-Blue, #1C495A) !important;
	align-items: flex-start !important;
}

.ocx-eco-compare__th--ocx .ocx-eco-compare__th-inner {
	border-top: var(--Stroke-Hairline, 0.5px) solid var(--Color-Nile-Blue, #1C495A) !important;
	border-left: var(--Stroke-Hairline, 0.5px) solid var(--Color-Nile-Blue, #1C495A) !important;
	border-right: var(--Stroke-Hairline, 0.5px) solid var(--Color-Nile-Blue, #1C495A) !important;
	justify-content: space-between !important;
	align-items: center !important;
}

.ocx-eco-compare__th-title {
	font-family: var(--wp--preset--font-family--manrope, "Manrope", sans-serif) !important;
	font-size: var(--Text-Sizes-Heading-6, 22px) !important;
	font-weight: 700 !important;
	line-height: 1.25 !important;
	color: #162227 !important;
	margin: 0 !important;
}

.ocx-eco-compare__sparkles {
	width: 35px !important;
	height: 34px !important;
	flex-shrink: 0 !important;
	display: block !important;
}

/* Data Cells */
.ocx-eco-compare__td {
	padding: 10px 0 !important;
	vertical-align: middle !important;
	box-sizing: border-box !important;
}

.ocx-eco-compare__td-inner {
	min-height: 60px !important;
	height: 100% !important;
	box-sizing: border-box !important;
	padding: 0 20px !important;
	display: flex !important;
	align-items: center !important;
	font-family: var(--wp--preset--font-family--widescreen, 'Widescreen', sans-serif) !important;
	font-size: var(--Text-Sizes-Text-Regular, 16px) !important;
	line-height: 24px !important;
	color: #162227 !important;
}

/* Segmented vertical borders */
.ocx-eco-compare__td--label .ocx-eco-compare__td-inner {
	font-weight: 600 !important;
	border-left: var(--Stroke-Hairline, 0.5px) solid var(--Color-Nile-Blue, #1C495A) !important;
	border-right: var(--Stroke-Hairline, 0.5px) solid var(--Color-Nile-Blue, #1C495A) !important;
}

.ocx-eco-compare__td--trad .ocx-eco-compare__td-inner {
	font-weight: 400 !important;
	border-right: var(--Stroke-Hairline, 0.5px) solid var(--Color-Nile-Blue, #1C495A) !important;
}

.ocx-eco-compare__td--ocx .ocx-eco-compare__td-inner {
	font-weight: 400 !important;
	border-right: var(--Stroke-Hairline, 0.5px) solid var(--Color-Nile-Blue, #1C495A) !important;
}

/* Last Row Bottom Border on Col 2 and Col 3 */
.ocx-eco-compare__tr--last .ocx-eco-compare__td--trad .ocx-eco-compare__td-inner,
.ocx-eco-compare__tr--last .ocx-eco-compare__td--ocx .ocx-eco-compare__td-inner {
	border-bottom: var(--Stroke-Hairline, 0.5px) solid var(--Color-Nile-Blue, #1C495A) !important;
}

/* Responsive Overrides */
@media (max-width: 1200px) {
	.ocx-eco-compare__card {
		padding: 80px 48px !important;
		gap: 60px !important;
	}
	.ocx-eco-compare__title {
		font-size: 42px !important;
		line-height: 46px !important;
	}
}

@media (max-width: 991px) {
	.ocx-eco-compare__outer {
		min-height: auto !important;
	}
	.ocx-eco-compare__card {
		padding: 60px 32px !important;
		gap: 48px !important;
		min-height: auto !important;
	}
	.ocx-eco-compare__title {
		font-size: 36px !important;
		line-height: 40px !important;
	}
	.ocx-eco-compare__desc p {
		font-size: 16px !important;
		line-height: 24px !important;
	}
}

@media (max-width: 767.98px) {
	.ocx-section.ocx-eco-compare__section {
		padding: 0 10px !important;
	}
	.ocx-eco-compare__outer,
	.ocx-eco-compare__container {
		border-radius: 0 !important;
		min-height: auto !important;
	}
	.ocx-eco-compare__card {
		padding: 48px 16px !important;
		border-radius: var(--Radius-Medium, 16px) !important;
		gap: 36px !important;
		min-height: auto !important;
	}
	.ocx-eco-compare__title {
		font-size: 28px !important;
		line-height: 34px !important;
		letter-spacing: -0.02em !important;
	}
	.ocx-eco-compare__title-accent {
		letter-spacing: -0.02em !important;
	}
	.ocx-eco-compare__desc p {
		font-size: 15px !important;
		line-height: 22px !important;
	}
	.ocx-eco-compare__table {
		min-width: 580px !important;
	}
	.ocx-eco-compare__th-inner {
		padding: 16px 14px 10px 14px !important;
		height: 80px !important;
	}
	.ocx-eco-compare__th-title {
		font-size: 17px !important;
	}
	.ocx-eco-compare__sparkles {
		width: 26px !important;
		height: 25px !important;
	}
	.ocx-eco-compare__td-inner {
		padding: 0 12px !important;
		font-size: 14px !important;
		line-height: 20px !important;
	}
}

/*
 * ==========================================================================
 * Ecosystem: LLM's Comparison (Section 6)
 * ==========================================================================
 */
/*
 * ==========================================================================
 * Ecosystem: LLM's Comparison (Figma node #12649:913)
 * ==========================================================================
 */
.ocx-section.ocx-eco-llm__section {
	display: flex !important;
	justify-content: center !important;
	align-items: center !important;
	width: 100% !important;
	padding: 0 !important;
	margin: 0 !important;
	background-color: var(--Color-OpenCX-White, #FCFBF9) !important;
	box-sizing: border-box !important;
}

/* Outer Container (Figma 12649:916/917: 1280x1459, pattern fill, border 0.5px solid #CBBB85) */
.ocx-eco-llm__outer,
.ocx-eco-llm__container {
	display: flex !important;
	flex-direction: column !important;
	align-items: center !important;
	width: 100% !important;
	max-width: var(--Container-container-large, 1280px) !important;
	min-height: 1459px !important;
	margin: 0 auto !important;
	padding: var(--Section-Padding-padding-section-medium, 80px) 0 !important;
	border-left: var(--Stroke-Hairline, 0.5px) solid var(--Color-OpenCX-Dune-Light, #CBBB85) !important;
	border-right: var(--Stroke-Hairline, 0.5px) solid var(--Color-OpenCX-Dune-Light, #CBBB85) !important;
	background-color: var(--Color-OpenCX-White, #FCFBF9) !important;
	background-image: url('../images/pattern-tile.svg') !important;
	background-repeat: repeat !important;
	background-size: 60px 60px !important;
	box-sizing: border-box !important;
	position: relative !important;
}

/* Inner Card (Figma 12649:918: 1088x1303, r:20px, fill #FCFBF9, border 0.5px solid #B1C9D3, padding 112px 112px, gap 80px) */
.ocx-eco-llm__card {
	display: flex !important;
	flex-direction: column !important;
	align-items: center !important;
	gap: 80px !important;
	width: 100% !important;
	max-width: 1088px !important;
	min-height: 1303px !important;
	box-sizing: border-box !important;
	border-radius: var(--Radius-Medium, 20px) !important;
	background-color: var(--Color-OpenCX-White, #FCFBF9) !important;
	border: var(--Stroke-Hairline, 0.5px) solid var(--Color-OpenCX-Lighter, #B1C9D3) !important;
	padding: var(--Section-Padding-padding-section-large, 112px) var(--Section-Padding-padding-section-large, 112px) !important;
}

/* Header Content (Figma 12649:919/920: max-width 864px, gap 32px) */
.ocx-eco-llm__header {
	display: flex !important;
	flex-direction: column !important;
	align-items: center !important;
	gap: 32px !important;
	max-width: 864px !important;
	width: 100% !important;
	box-sizing: border-box !important;
	text-align: center !important;
}

/* Tagline Wrapper (Figma 12649:921: 22px / 33px Widescreen 400 #B69E52) */
.ocx-eco-llm__tagline {
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	gap: 6px !important;
	font-family: var(--wp--preset--font-family--widescreen, 'Widescreen', sans-serif) !important;
	font-size: var(--Text-Sizes-Heading-6, 22px) !important;
	font-weight: 400 !important;
	line-height: 33px !important;
	color: var(--Color-OpenCX-Dune, #B69E52) !important;
}

.ocx-eco-llm__tagline .ocx-bracket {
	color: var(--Color-OpenCX-Dune, #B69E52) !important;
	font-size: 22px !important;
	font-weight: 300 !important;
	line-height: 1 !important;
}

.ocx-eco-llm__tagline-text {
	color: var(--Color-OpenCX-Dune, #B69E52) !important;
	letter-spacing: 0 !important;
}

/* Heading (Figma 12649:923: 55px Widescreen 400 + 55px Widescreen Ex 400 #00C9C9) */
.ocx-eco-llm__title {
	font-family: var(--wp--preset--font-family--widescreen, 'Widescreen', sans-serif) !important;
	font-size: var(--Text-Sizes-Heading-1-Accent, 55px) !important;
	font-weight: 400 !important;
	line-height: 55px !important;
	letter-spacing: -0.55px !important;
	color: #162227 !important;
	margin: 0 !important;
	text-align: center !important;
}

.ocx-eco-llm__title-accent {
	font-family: var(--wp--preset--font-family--widescreen-ex, 'Widescreen Ex', sans-serif) !important;
	font-weight: 400 !important;
	letter-spacing: -1.65px !important;
	color: #00C9C9 !important;
}

/* Description (Figma 12649:925: 18px / 27px Manrope 400, color #162227, text-align left) */
.ocx-eco-llm__desc {
	display: flex !important;
	flex-direction: column !important;
	gap: 20px !important;
	width: 100% !important;
	text-align: left !important;
}

.ocx-eco-llm__desc p {
	font-family: var(--wp--preset--font-family--manrope, "Manrope", sans-serif) !important;
	font-size: var(--Text-Sizes-Text-Medium, 18px) !important;
	font-weight: 300 !important;
	line-height: 27px !important;
	letter-spacing: 0 !important;
	color: #162227 !important;
	margin: 0 !important;
	text-align: left !important;
}

/* Table Wrapper (Figma 12649:926: max-width 864px) */
.ocx-eco-llm__table-wrap {
	width: 100% !important;
	max-width: 864px !important;
	box-sizing: border-box !important;
	overflow-x: auto !important;
	scroll-behavior: smooth !important;
	-webkit-overflow-scrolling: touch !important;
	scrollbar-width: thin;
	scrollbar-color: var(--Color-Nile-Blue, #1C495A) rgba(28, 73, 90, 0.1);
}

.ocx-eco-llm__table-wrap::-webkit-scrollbar {
	height: 6px;
}

.ocx-eco-llm__table-wrap::-webkit-scrollbar-track {
	background: rgba(28, 73, 90, 0.1);
	border-radius: 3px;
}

.ocx-eco-llm__table-wrap::-webkit-scrollbar-thumb {
	background: var(--Color-Nile-Blue, #1C495A);
	border-radius: 3px;
}

/* Table Grid */
.ocx-eco-llm__table {
	width: 100% !important;
	min-width: 680px !important;
	max-width: 864px !important;
	border-collapse: collapse !important;
	border-spacing: 0 !important;
	table-layout: fixed !important;
	margin: 0 auto !important;
}

/* Columns: 325px (37.62%), 269.5px (31.19%), 269.5px (31.19%) */
.ocx-eco-llm__th--spacer,
.ocx-eco-llm__td--label {
	width: 37.62% !important;
}

.ocx-eco-llm__th--trad,
.ocx-eco-llm__td--trad {
	width: 31.19% !important;
}

.ocx-eco-llm__th--ocx,
.ocx-eco-llm__td--ocx {
	width: 31.19% !important;
}

/* Table Rows */
.ocx-eco-llm__tr--head {
	height: 100px !important;
}

.ocx-eco-llm__tr:not(.ocx-eco-llm__tr--head) {
	height: 80px !important;
}

/* Headers */
.ocx-eco-llm__th {
	padding: 0 0 10px 0 !important;
	vertical-align: top !important;
	box-sizing: border-box !important;
}

.ocx-eco-llm__th--spacer {
	border: none !important;
	background: transparent !important;
}

.ocx-eco-llm__th-inner {
	height: 90px !important;
	box-sizing: border-box !important;
	padding: 24px 24px 10px 24px !important;
	display: flex !important;
	align-items: center !important;
}

.ocx-eco-llm__th--trad .ocx-eco-llm__th-inner {
	border-top: var(--Stroke-Hairline, 0.5px) solid var(--Color-Nile-Blue, #1C495A) !important;
	border-left: var(--Stroke-Hairline, 0.5px) solid var(--Color-Nile-Blue, #1C495A) !important;
	align-items: flex-start !important;
}

.ocx-eco-llm__th--ocx .ocx-eco-llm__th-inner {
	border-top: var(--Stroke-Hairline, 0.5px) solid var(--Color-Nile-Blue, #1C495A) !important;
	border-left: var(--Stroke-Hairline, 0.5px) solid var(--Color-Nile-Blue, #1C495A) !important;
	border-right: var(--Stroke-Hairline, 0.5px) solid var(--Color-Nile-Blue, #1C495A) !important;
	justify-content: space-between !important;
	align-items: center !important;
}

.ocx-eco-llm__th-title {
	font-family: var(--wp--preset--font-family--manrope, "Manrope", sans-serif) !important;
	font-size: var(--Text-Sizes-Heading-6, 22px) !important;
	font-weight: 700 !important;
	line-height: 1.25 !important;
	color: #162227 !important;
	margin: 0 !important;
}

.ocx-eco-llm__sparkles {
	width: 35px !important;
	height: 34px !important;
	flex-shrink: 0 !important;
	display: block !important;
}

/* Data Cells */
.ocx-eco-llm__td {
	padding: 10px 0 !important;
	vertical-align: middle !important;
	box-sizing: border-box !important;
}

.ocx-eco-llm__td-inner {
	min-height: 60px !important;
	height: 100% !important;
	box-sizing: border-box !important;
	padding: 0 20px !important;
	display: flex !important;
	align-items: center !important;
	font-family: var(--wp--preset--font-family--widescreen, 'Widescreen', sans-serif) !important;
	font-size: var(--Text-Sizes-Text-Regular, 16px) !important;
	line-height: 24px !important;
	color: #162227 !important;
}

/* Segmented vertical borders */
.ocx-eco-llm__td--label .ocx-eco-llm__td-inner {
	font-weight: 600 !important;
	border-left: var(--Stroke-Hairline, 0.5px) solid var(--Color-Nile-Blue, #1C495A) !important;
	border-right: var(--Stroke-Hairline, 0.5px) solid var(--Color-Nile-Blue, #1C495A) !important;
}

.ocx-eco-llm__td--trad .ocx-eco-llm__td-inner {
	font-weight: 400 !important;
	border-right: var(--Stroke-Hairline, 0.5px) solid var(--Color-Nile-Blue, #1C495A) !important;
}

.ocx-eco-llm__td--ocx .ocx-eco-llm__td-inner {
	font-weight: 400 !important;
	border-right: var(--Stroke-Hairline, 0.5px) solid var(--Color-Nile-Blue, #1C495A) !important;
}

/* Last Row Bottom Border on Col 2 and Col 3 */
.ocx-eco-llm__tr--last .ocx-eco-llm__td--trad .ocx-eco-llm__td-inner,
.ocx-eco-llm__tr--last .ocx-eco-llm__td--ocx .ocx-eco-llm__td-inner {
	border-bottom: var(--Stroke-Hairline, 0.5px) solid var(--Color-Nile-Blue, #1C495A) !important;
}

/* Responsive Overrides */
@media (max-width: 1200px) {
	.ocx-eco-llm__outer,
	.ocx-eco-llm__container {
		padding: 60px 24px !important;
	}
	.ocx-eco-llm__card {
		padding: 80px 48px !important;
		gap: 60px !important;
	}
	.ocx-eco-llm__title {
		font-size: 42px !important;
		line-height: 46px !important;
	}
}

@media (max-width: 991px) {
	.ocx-eco-llm__outer,
	.ocx-eco-llm__container {
		min-height: auto !important;
		padding: 48px 20px !important;
	}
	.ocx-eco-llm__card {
		padding: 60px 32px !important;
		gap: 48px !important;
		min-height: auto !important;
	}
	.ocx-eco-llm__title {
		font-size: 36px !important;
		line-height: 40px !important;
	}
	.ocx-eco-llm__desc p {
		font-size: 16px !important;
		line-height: 24px !important;
	}
}

@media (max-width: 767.98px) {
	.ocx-section.ocx-eco-llm__section {
		padding: 0 10px !important;
	}
	.ocx-eco-llm__outer,
	.ocx-eco-llm__container {
		border-radius: 0 !important;
		min-height: auto !important;
		padding: 32px 0 !important;
	}
	.ocx-eco-llm__card {
		padding: 48px 16px !important;
		border-radius: var(--Radius-Medium, 16px) !important;
		gap: 36px !important;
		min-height: auto !important;
	}
	.ocx-eco-llm__tagline {
		font-size: 14px !important;
		line-height: 20px !important;
		white-space: nowrap !important;
		gap: 4px !important;
	}
	.ocx-eco-llm__tagline .ocx-bracket {
		font-size: 14px !important;
	}
	.ocx-eco-llm__title {
		font-size: 28px !important;
		line-height: 34px !important;
		letter-spacing: -0.02em !important;
	}
	.ocx-eco-llm__title-accent {
		letter-spacing: -0.02em !important;
	}
	.ocx-eco-llm__desc p {
		font-size: 15px !important;
		line-height: 22px !important;
	}
	.ocx-eco-llm__table {
		min-width: 560px !important;
	}
	.ocx-eco-llm__th-inner {
		padding: 16px 14px 10px 14px !important;
		height: 80px !important;
	}
	.ocx-eco-llm__th-title {
		font-size: 17px !important;
	}
	.ocx-eco-llm__sparkles {
		width: 26px !important;
		height: 25px !important;
	}
	.ocx-eco-llm__td-inner {
		padding: 0 12px !important;
		font-size: 14px !important;
		line-height: 20px !important;
	}
}

/*
 * ==========================================================================
 * Ecosystem: Mobile Comparison Table Swipe Hint
 * ==========================================================================
 */
.ocx-eco-swipe-hint {
	display: none !important;
}

@media (max-width: 767.98px) {
	.ocx-eco-swipe-hint {
		display: flex !important;
		justify-content: center !important;
		align-items: center !important;
		width: 100% !important;
		margin-top: -10px !important;
		margin-bottom: -10px !important;
		transition: opacity 0.35s ease, transform 0.35s ease !important;
	}

	.ocx-eco-swipe-hint.is-scrolled {
		opacity: 0 !important;
		transform: translateY(-4px) !important;
		pointer-events: none !important;
	}

	.ocx-eco-swipe-hint__pill {
		display: inline-flex !important;
		align-items: center !important;
		justify-content: center !important;
		gap: 8px !important;
		padding: 7px 16px !important;
		border-radius: 9999px !important;
		border: var(--Stroke-Hairline, 0.5px) solid rgba(28, 73, 90, 0.22) !important;
		background: rgba(28, 73, 90, 0.08) !important;
		color: #162227 !important;
		font-family: var(--wp--preset--font-family--widescreen, 'Widescreen', sans-serif) !important;
		font-size: 12px !important;
		font-weight: 500 !important;
		line-height: 1.2 !important;
		letter-spacing: 0.04em !important;
		text-transform: uppercase !important;
		cursor: pointer !important;
		margin: 0 !important;
		outline: none !important;
		-webkit-appearance: none !important;
		appearance: none !important;
		-webkit-tap-highlight-color: transparent !important;
		box-shadow: 0 1px 4px rgba(0, 0, 0, 0.03) !important;
		backdrop-filter: blur(6px) !important;
		-webkit-backdrop-filter: blur(6px) !important;
		transition: background-color 0.2s ease, border-color 0.2s ease, transform 0.15s ease !important;
	}

	.ocx-eco-swipe-hint__pill:active {
		transform: scale(0.97) !important;
	}

	.ocx-eco-compare__card .ocx-eco-swipe-hint__pill {
		background: rgba(255, 255, 255, 0.6) !important;
		border-color: rgba(28, 73, 90, 0.25) !important;
	}

	.ocx-eco-llm__card .ocx-eco-swipe-hint__pill {
		background: rgba(28, 73, 90, 0.06) !important;
		border-color: rgba(28, 73, 90, 0.2) !important;
	}

	.ocx-eco-swipe-hint__icon {
		display: block !important;
		width: 17px !important;
		height: 17px !important;
		flex-shrink: 0 !important;
		color: var(--Color-Nile-Blue, #1C495A) !important;
		animation: ocxSwipeHandAnim 2.2s cubic-bezier(0.4, 0, 0.2, 1) infinite !important;
	}

	.ocx-eco-swipe-hint__arrow {
		display: inline-block !important;
		font-size: 13px !important;
		line-height: 1 !important;
		color: var(--Color-Nile-Blue, #1C495A) !important;
		animation: ocxSwipeArrowAnim 2.2s cubic-bezier(0.4, 0, 0.2, 1) infinite !important;
	}

	@keyframes ocxSwipeHandAnim {
		0%, 15%, 85%, 100% {
			transform: translateX(0);
		}
		45%, 55% {
			transform: translateX(5px);
		}
	}

	@keyframes ocxSwipeArrowAnim {
		0%, 15%, 85%, 100% {
			transform: translateX(0);
		}
		45%, 55% {
			transform: translateX(4px);
		}
	}
}

/*
 * ==========================================================================
 * Ecosystem: CTA Ecosystem (Figma node #12649:977)
 * ==========================================================================
 */
.ocx-section.ocx-eco-cta__section {
	display: flex !important;
	justify-content: center !important;
	align-items: center !important;
	width: 100% !important;
	padding: 0 !important;
	margin: 0 !important;
	background-color: var(--Color-OpenCX-White, #FCFBF9) !important;
	box-sizing: border-box !important;
}

/* 1280x469 Container with pattern tile and rounded bottom corners (Figma 12649:978/979) */
.ocx-eco-cta__container {
	display: flex !important;
	flex-direction: column !important;
	align-items: center !important;
	justify-content: center !important;
	width: 100% !important;
	max-width: var(--Container-container-large, 1280px) !important;
	min-height: 469px !important;
	margin: 0 auto !important;
	padding: 98px var(--Section-Padding-padding-section-medium, 80px) 97px !important;
	box-sizing: border-box !important;
	background-color: var(--Color-OpenCX-White, #FCFBF9) !important;
	background-image: url('../images/pattern-tile.svg') !important;
	background-repeat: repeat !important;
	background-size: 60px 60px !important;
	border-left: var(--Stroke-Hairline, 0.5px) solid var(--Color-OpenCX-Dune-Light, #CBBB85) !important;
	border-right: var(--Stroke-Hairline, 0.5px) solid var(--Color-OpenCX-Dune-Light, #CBBB85) !important;
	border-bottom: var(--Stroke-Hairline, 0.5px) solid var(--Color-OpenCX-Dune-Light, #CBBB85) !important;
	border-top: none !important;
	border-radius: 0 0 var(--Radius-Medium, 20px) var(--Radius-Medium, 20px) !important;
	position: relative !important;
}

/* Content wrapper (Figma 12649:981: 768px wide, gap 32px) */
.ocx-eco-cta__content {
	display: flex !important;
	flex-direction: column !important;
	align-items: center !important;
	gap: 32px !important;
	max-width: 768px !important;
	width: 100% !important;
	box-sizing: border-box !important;
	text-align: center !important;
}

/* Header (Figma 12649:982: gap 24px) */
.ocx-eco-cta__header {
	display: flex !important;
	flex-direction: column !important;
	align-items: center !important;
	gap: 24px !important;
	width: 100% !important;
	text-align: center !important;
}

/* Heading (Figma 12649:983: 50px / 60px Widescreen 400 -0.5px, color #162227) */
.ocx-eco-cta__heading {
	font-family: var(--wp--preset--font-family--widescreen, 'Widescreen', sans-serif) !important;
	font-size: 50px !important;
	font-weight: 400 !important;
	line-height: 60px !important;
	letter-spacing: -0.5px !important;
	color: #162227 !important;
	margin: 0 !important;
	text-align: center !important;
}

/* Description (Figma 12649:984: 18px / 27px Widescreen 400, color #162227) */
.ocx-eco-cta__desc {
	font-family: var(--wp--preset--font-family--widescreen, 'Widescreen', sans-serif) !important;
	font-size: 18px !important;
	font-weight: 300 !important;
	line-height: 27px !important;
	letter-spacing: 0 !important;
	color: #162227 !important;
	margin: 0 !important;
	text-align: center !important;
}

/* Actions (Figma 12649:985: gap 16px) */
.ocx-eco-cta__actions {
	display: flex !important;
	flex-direction: row !important;
	align-items: center !important;
	justify-content: center !important;
	gap: 16px !important;
	width: 100% !important;
}

/* Button 1: Primary Dune filled (Figma 12649:986: 10px 24px, #B69E52 fill & stroke, white text) */
.ocx-eco-cta__btn-primary {
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	padding: 10px 24px !important;
	gap: 8px !important;
	font-family: var(--wp--preset--font-family--widescreen, 'Widescreen', sans-serif) !important;
	font-size: 16px !important;
	font-weight: 300 !important;
	line-height: 24px !important;
	letter-spacing: 0 !important;
	color: var(--Color-OpenCX-White, #FCFBF9) !important;
	background-color: var(--Color-OpenCX-Dune, #B69E52) !important;
	border: 1px solid var(--Color-OpenCX-Dune, #B69E52) !important;
	text-decoration: none !important;
	box-sizing: border-box !important;
	cursor: pointer !important;
	transition: all 0.2s ease !important;
}

.ocx-eco-cta__btn-primary:hover {
	background-color: #9d8743 !important;
	border-color: #9d8743 !important;
	color: #ffffff !important;
}

/* Button 2: Secondary Dune bracket / pipe border (Figma 12649:987: 10px 24px, left & right 1px #B69E52, dune text) */
.ocx-eco-cta__btn-secondary {
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	padding: 10px 24px !important;
	gap: 8px !important;
	font-family: var(--wp--preset--font-family--widescreen, 'Widescreen', sans-serif) !important;
	font-size: 16px !important;
	font-weight: 400 !important;
	line-height: 24px !important;
	letter-spacing: 0 !important;
	color: var(--Color-OpenCX-Dune, #B69E52) !important;
	background: transparent !important;
	border-top: none !important;
	border-bottom: none !important;
	border-left: 1px solid var(--Color-OpenCX-Dune, #B69E52) !important;
	border-right: 1px solid var(--Color-OpenCX-Dune, #B69E52) !important;
	text-decoration: none !important;
	box-sizing: border-box !important;
	cursor: pointer !important;
	transition: all 0.2s ease !important;
}

.ocx-eco-cta__btn-secondary:hover {
	background-color: rgba(182, 158, 82, 0.08) !important;
}

/* Responsive Overrides */
@media (max-width: 1200px) {
	.ocx-eco-cta__container {
		padding: 80px 48px !important;
	}
	.ocx-eco-cta__heading {
		font-size: 42px !important;
		line-height: 50px !important;
	}
}

@media (max-width: 991px) {
	.ocx-eco-cta__container {
		min-height: auto !important;
		padding: 60px 32px !important;
	}
	.ocx-eco-cta__heading {
		font-size: 36px !important;
		line-height: 44px !important;
	}
	.ocx-eco-cta__desc {
		font-size: 16px !important;
		line-height: 24px !important;
	}
}

@media (max-width: 767.98px) {
	.ocx-section.ocx-eco-cta__section {
		padding: 0 var(--Page-Padding-padding-global, 20px) !important;
	}
	.ocx-eco-cta__container {
		min-height: auto !important;
		padding: 48px 16px !important;
		border-radius: 0 0 var(--Radius-Medium, 16px) var(--Radius-Medium, 16px) !important;
	}
	.ocx-eco-cta__content {
		gap: 24px !important;
	}
	.ocx-eco-cta__header {
		gap: 16px !important;
	}
	.ocx-eco-cta__heading {
		font-size: 28px !important;
		line-height: 34px !important;
		letter-spacing: -0.02em !important;
	}
	.ocx-eco-cta__desc {
		font-size: 15px !important;
		line-height: 22px !important;
	}
	.ocx-eco-cta__actions {
		flex-direction: column !important;
		gap: 12px !important;
		width: 100% !important;
	}
	.ocx-eco-cta__btn-primary,
	.ocx-eco-cta__btn-secondary {
		width: 100% !important;
		max-width: 280px !important;
		text-align: center !important;
	}
}

/*
 * Ecosystem Page: Footer Background (Figma node #12649:988)
 * Ensures footer canvas matches Ecosystem page design (#FCFBF9)
 */
.page-id-61 .ocx-footer,
.page-template-page-ecosystem .ocx-footer,
.page-ecosystem .ocx-footer,
body:has(.ocx-eco-cta__section) .ocx-footer,
.page-id-61 footer.wp-block-template-part,
.page-template-page-ecosystem footer.wp-block-template-part,
body:has(.ocx-eco-cta__section) footer.wp-block-template-part,
.page-id-3 .ocx-footer,
.page-template-page-privacy-policy .ocx-footer,
.page-privacy-policy .ocx-footer,
body:has(.ocx-privacy-hero__section) .ocx-footer,
.page-template-page-terms-of-service .ocx-footer,
.page-terms-of-service .ocx-footer,
body:has(.ocx-terms-hero__section) .ocx-footer,
.page-id-3 footer.wp-block-template-part,
.page-template-page-privacy-policy footer.wp-block-template-part,
body:has(.ocx-privacy-hero__section) footer.wp-block-template-part,
.page-template-page-terms-of-service footer.wp-block-template-part,
body:has(.ocx-terms-hero__section) footer.wp-block-template-part {
	background: var(--Color-OpenCX-White, #FCFBF9) !important;
	background-color: var(--Color-OpenCX-White, #FCFBF9) !important;
}

/* ==========================================================================
 * SOlaaS (Solution as a service): Section 1 - Hero (Figma node #12824:16515)
 * ==========================================================================
 */
.ocx-section.ocx-solaas-hero__section {
	--Color-Scheme-1-Text: #162227;
	width: 100% !important;
	padding: 0 max(20px, calc((100% - 1280px) / 2)) !important;
	margin: 0 !important;
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	background-color: var(--Color-OpenCX-White, #FCFBF9) !important;
	box-sizing: border-box !important;
}

/* Outer Frame (Figma 12824:16516: 1280x952, border 0.5px solid #607F8B, background #CBBB85) */
.ocx-solaas-hero__outer {
	width: 100% !important;
	max-width: var(--Container-container-large, 1280px) !important;
	min-height: 952px !important;
	margin: 0 auto !important;
	border-top: var(--Stroke-Hairline, 0.5px) solid var(--Color-Deep-Blue-Light, #607F8B) !important;
	border-left: var(--Stroke-Hairline, 0.5px) solid var(--Color-Deep-Blue-Light, #607F8B) !important;
	border-right: var(--Stroke-Hairline, 0.5px) solid var(--Color-Deep-Blue-Light, #607F8B) !important;
	border-bottom: none !important;
	background: var(--Color-OpenCX-Dune-Light, #CBBB85) !important;
	box-sizing: border-box !important;
	display: flex !important;
	flex-direction: column !important;
	align-items: center !important;
	justify-content: flex-start !important;
	position: relative !important;
}

/* Inner Rounded Card (Figma 12824:16517: 1280x952, r:20px, border 0.5px solid #CBBB85, background #FCFBF9) */
.ocx-solaas-hero__container {
	position: relative !important;
	display: flex !important;
	flex-direction: column !important;
	align-items: center !important;
	justify-content: flex-start !important;
	width: calc(100% + 2px) !important;
	min-height: 952px !important;
	margin: -1px !important;
	border-radius: var(--Radius-Medium, 20px) !important;
	border-top: var(--Stroke-Hairline, 0.5px) solid var(--Color-OpenCX-Dune-Light, #CBBB85) !important;
	border-left: var(--Stroke-Hairline, 0.5px) solid var(--Color-OpenCX-Dune-Light, #CBBB85) !important;
	border-right: var(--Stroke-Hairline, 0.5px) solid var(--Color-OpenCX-Dune-Light, #CBBB85) !important;
	border-bottom: none !important;
	background-color: var(--Color-OpenCX-White, #FCFBF9) !important;
	padding: 0 !important;
	box-sizing: border-box !important;
	overflow: hidden !important;
}

/* Background Layer 1: Gradient #1 (Figma #12824:16518: 1280x871 at y:81px) */
/* Background Layer 2: Texture #2 (Figma #12905:3642: 1280x871 at y:80px) */
/* Card Wrapper (Figma 12824:16519: 1120px wide, y:80.5px, gap:32px) */
.ocx-solaas-hero__card {
	position: relative !important;
	z-index: 3 !important;
	width: 100% !important;
	max-width: 1120px !important;
	height: 100% !important;
	flex-grow: 1 !important;
	padding-top: 80.5px !important;
	display: flex !important;
	flex-direction: column !important;
	align-items: center !important;
	justify-content: space-between !important;
	gap: 32px !important;
	box-sizing: border-box !important;
}

/* Text Column (Figma 12824:16520: 980px wide, gap:48px) */
.ocx-solaas-hero__col-text {
	width: 100% !important;
	max-width: 980px !important;
	display: flex !important;
	flex-direction: column !important;
	align-items: center !important;
	gap: 48px !important;
	text-align: center !important;
	box-sizing: border-box !important;
}

/* Content Group (Figma 12824:16521: gap 24px) */
.ocx-solaas-hero__content {
	width: 100% !important;
	display: flex !important;
	flex-direction: column !important;
	align-items: center !important;
	gap: 24px !important;
	text-align: center !important;
	box-sizing: border-box !important;
}

/* Tagline Wrapper (Figma 12934:973: padding 0 11px, flex row, align items center) */
.ocx-solaas-hero__tagline {
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	padding: 0 11px !important;
	gap: 0 !important;
	box-sizing: border-box !important;
}

.ocx-solaas-hero__bracket {
	width: 24px !important;
	height: 24px !important;
	flex-shrink: 0 !important;
	display: block !important;
}

.ocx-solaas-hero__tagline-text {
	font-family: var(--wp--preset--font-family--widescreen, 'Widescreen', sans-serif) !important;
	font-size: var(--Text-Sizes-Heading-6, 22px) !important;
	font-weight: 400 !important;
	line-height: 33px !important;
	color: var(--Color-OpenCX-Black, #162227) !important;
	text-align: center !important;
}

/* Heading (Figma 12824:16523: 55px / 55px Widescreen 400 #162227) */
.ocx-solaas-hero__heading {
	font-family: var(--wp--preset--font-family--widescreen, 'Widescreen', sans-serif) !important;
	font-size: 55px !important;
	font-weight: 400 !important;
	line-height: 55px !important;
	letter-spacing: -0.01em !important;
	color: var(--Color-OpenCX-Black, #162227) !important;
	margin: 0 !important;
	text-align: center !important;
}

.ocx-solaas-hero__heading-gold {
	font-family: var(--wp--preset--font-family--widescreen-ex, 'Widescreen Ex', sans-serif) !important;
	font-weight: 400 !important;
	color: var(--Color-OpenCX-Dune, #B69E52) !important;
	letter-spacing: -0.03em !important;
}

/* Paragraph (Figma 12824:16524: 18px / 27px Widescreen 400 #162227, max-width 745px) */
.ocx-solaas-hero__paragraph {
	max-width: 745px !important;
	align-self: stretch !important;
	margin: 0 auto !important;
	color: var(--Color-Scheme-1-Text, #162227) !important;
	text-align: center !important;

	/* Text/Medium/Normal */
	font-family: var(--wp--preset--font-family--widescreen, 'Widescreen', sans-serif) !important;
	font-size: var(--Text-Sizes-Text-Medium, 18px) !important;
	font-style: normal !important;
	font-weight: 300 !important;
	line-height: 150% !important; /* 27px */
	box-sizing: border-box !important;
}

/* Actions & Button (Figma 12824:16525 & 12824:16526: 10px 24px, fill #F0EBDC, border 1px #CBBB85, text #B69E52) */
.ocx-solaas-hero__actions {
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	gap: 16px !important;
	margin: 0 !important;
}

.ocx-solaas-hero__btn {
	display: flex !important;
	padding: 10px 24px !important;
	justify-content: center !important;
	align-items: center !important;
	gap: 8px !important;
	border: 1px solid var(--Color-OpenCX-Dune-Light, #CBBB85) !important;
	background: var(--Color-OpenCX-Dune-Lighter, #F0EBDC) !important;
	border-radius: 0 !important;
	font-family: var(--wp--preset--font-family--widescreen, 'Widescreen', sans-serif) !important;
	font-size: var(--Text-Sizes-Text-Regular, 16px) !important;
	font-weight: 300 !important;
	line-height: 150% !important; /* 24px */
	color: var(--Color-OpenCX-Dune, #B69E52) !important;
	text-decoration: none !important;
	cursor: pointer !important;
	box-sizing: border-box !important;
	transition: all 0.2s ease !important;
}

.ocx-solaas-hero__btn:hover {
	background-color: #e5ded0 !important;
	color: #917e41 !important;
	border-color: #b69e52 !important;
}

/* Solution Hero Visual Stage (Figma #12824:16527 & multi-card composition) */
.ocx-solaas-hero__stage {
	--stage-scale: 1;
	position: relative !important;
	width: calc(660.9296875px * var(--stage-scale)) !important;
	max-width: 100% !important;
	height: calc(439px * var(--stage-scale)) !important;
	display: flex !important;
	flex-direction: column !important;
	align-items: center !important;
	margin-top: auto !important;
	margin-bottom: 0 !important;
	box-sizing: border-box !important;
	z-index: 3 !important;
}

/* 0.5px horizontal border continuity on the left side of central dashboard */
.ocx-solaas-hero__stage::before {
	content: '' !important;
	position: absolute !important;
	bottom: 0 !important;
	right: 100% !important;
	width: 1200px !important;
	height: 1px !important;
	background: var(--Color-OpenCX-Dune-Light, #CBBB85) !important;
	border: none !important;
	transform: scaleY(0.5) !important;
	transform-origin: bottom !important;
	pointer-events: none !important;
	z-index: 2 !important;
}

/* 0.5px horizontal border continuity on the right side of central dashboard */
.ocx-solaas-hero__stage::after {
	content: '' !important;
	position: absolute !important;
	bottom: 0 !important;
	left: 100% !important;
	width: 1200px !important;
	height: 1px !important;
	background: var(--Color-OpenCX-Dune-Light, #CBBB85) !important;
	border: none !important;
	transform: scaleY(0.5) !important;
	transform-origin: bottom !important;
	pointer-events: none !important;
	z-index: 2 !important;
}

/* Central Dashboard Graphic Column (Figma: 660.9296875 x 439, Radius/Medium, Stroke/Hairline top/left/right, NO bottom border) */
.ocx-solaas-hero__dashboard-wrap {
	display: flex !important;
	position: relative !important;
	width: 100% !important;
	height: 100% !important;
	flex-direction: column !important;
	justify-content: flex-start !important;
	align-items: center !important;
	border-top-left-radius: calc(var(--Radius-Medium, 20px) * var(--stage-scale)) !important;
	border-top-right-radius: calc(var(--Radius-Medium, 20px) * var(--stage-scale)) !important;
	border-bottom-left-radius: 0 !important;
	border-bottom-right-radius: 0 !important;
	border-top: var(--Stroke-Hairline, 0.5px) solid var(--Color-OpenCX-Dune-Light, #CBBB85) !important;
	border-right: var(--Stroke-Hairline, 0.5px) solid var(--Color-OpenCX-Dune-Light, #CBBB85) !important;
	border-left: var(--Stroke-Hairline, 0.5px) solid var(--Color-OpenCX-Dune-Light, #CBBB85) !important;
	border-bottom: none !important;
	overflow: hidden !important;
	box-sizing: border-box !important;
	background: #FFFFFF !important;
	opacity: 1 !important;
	z-index: 2 !important;
}

.ocx-solaas-hero__dashboard-content {
	display: flex !important;
	width: 100% !important;
	height: 100% !important;
	flex-direction: column !important;
	justify-content: flex-start !important;
	align-items: center !important;
	box-sizing: border-box !important;
}

.ocx-solaas-hero__dashboard-img {
	width: 100% !important;
	height: 100% !important;
	max-width: 100% !important;
	display: block !important;
	object-fit: cover !important;
	object-position: top center !important;
	flex-shrink: 0 !important;
}

/* Floating Parameter Cards: fine hairline borders, rounded corners, soft depth shadow */
.ocx-solaas-hero__card-float {
	position: absolute !important;
	border: var(--Stroke-Hairline, 0.5px) solid var(--Color-OpenCX-Dune-Light, #CBBB85) !important;
	box-shadow: 0 14px 34px rgba(22, 34, 39, 0.08), 0 2px 6px rgba(22, 34, 39, 0.04) !important;
	background-color: #FFFFFF !important;
	overflow: hidden !important;
	box-sizing: border-box !important;
	pointer-events: auto !important;
	transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.25s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

.ocx-solaas-hero__card-float:hover {
	transform: translateY(-2px) !important;
	box-shadow: 0 18px 40px rgba(22, 34, 39, 0.12), 0 4px 10px rgba(22, 34, 39, 0.06) !important;
}

.ocx-solaas-hero__card-crop {
	position: relative !important;
	width: 100% !important;
	height: 100% !important;
	overflow: hidden !important;
}

.ocx-solaas-hero__card-img {
	width: 100% !important;
	height: 100% !important;
	display: block !important;
	object-fit: cover !important;
	object-position: top center !important;
}

/* Card 1: Agent Configuration (AgentsUI.webp: width 134, height 160, opacity 0.76, r:10px, top: 620, left: 160) */
.ocx-solaas-hero__card-float--config {
	left: calc(-149.535px * var(--stage-scale)) !important;
	top: calc(107px * var(--stage-scale)) !important;
	width: calc(134px * var(--stage-scale)) !important;
	height: calc(160px * var(--stage-scale)) !important;
	border-radius: calc(10px * var(--stage-scale)) !important;
	opacity: 0.76 !important;
	z-index: 4 !important;
}

/* Card 2: Agent Behavior (AgentsUI01.webp: width 122, height 119, opacity 1, r:10px, top: 800, left: 249) */
.ocx-solaas-hero__card-float--behavior {
	left: calc(-60.535px * var(--stage-scale)) !important;
	top: calc(287px * var(--stage-scale)) !important;
	width: calc(122px * var(--stage-scale)) !important;
	height: calc(119px * var(--stage-scale)) !important;
	border-radius: calc(10px * var(--stage-scale)) !important;
	opacity: 1 !important;
	z-index: 5 !important;
}

/* Card 3: Tool Integration (Integration.webp: width 216, height 200, opacity 1, Radius/Small (16px), top: 560, left: 874) */
.ocx-solaas-hero__card-float--tools {
	right: calc(-119.535px * var(--stage-scale)) !important;
	top: calc(47px * var(--stage-scale)) !important;
	width: calc(216px * var(--stage-scale)) !important;
	height: calc(200px * var(--stage-scale)) !important;
	border-radius: calc(var(--Radius-Small, 16px) * var(--stage-scale)) !important;
	opacity: 1 !important;
	z-index: 4 !important;
}

/* Responsive Overrides */
@media (max-width: 1200px) {
	.ocx-solaas-hero__card {
		padding-top: 60px !important;
	}
	.ocx-solaas-hero__heading {
		font-size: 46px !important;
		line-height: 48px !important;
	}
	.ocx-solaas-hero__stage {
		--stage-scale: 0.82;
	}
}

@media (max-width: 991px) {
	.ocx-section.ocx-solaas-hero__section {
		padding: var(--Section-Padding-padding-section-xsmall, 16px) 10px 0 10px !important;
	}
	.ocx-solaas-hero__outer {
		width: 100% !important;
		max-width: 100% !important;
		min-height: auto !important;
		margin: 0 auto !important;
		background: var(--Color-OpenCX-Dune-Light, #CBBB85) !important;
		border-top: var(--Stroke-Hairline, 0.5px) solid var(--Color-OpenCX-Dune-Light, #CBBB85) !important;
		border-left: var(--Stroke-Hairline, 0.5px) solid var(--Color-OpenCX-Dune-Light, #CBBB85) !important;
		border-right: var(--Stroke-Hairline, 0.5px) solid var(--Color-OpenCX-Dune-Light, #CBBB85) !important;
		border-bottom: none !important;
		border-radius: 0 !important;
		box-sizing: border-box !important;
	}
	.ocx-solaas-hero__container {
		width: calc(100% + 1px) !important;
		max-width: none !important;
		min-height: auto !important;
		margin: -0.5px !important;
		border-top: var(--Stroke-Hairline, 0.5px) solid var(--Color-OpenCX-Dune-Light, #CBBB85) !important;
		border-left: var(--Stroke-Hairline, 0.5px) solid var(--Color-OpenCX-Dune-Light, #CBBB85) !important;
		border-right: var(--Stroke-Hairline, 0.5px) solid var(--Color-OpenCX-Dune-Light, #CBBB85) !important;
		border-bottom: none !important;
		border-radius: var(--Radius-Small, 16px) !important;
		background-color: var(--Color-OpenCX-White, #FCFBF9) !important;
		box-sizing: border-box !important;
	}
	.ocx-solaas-hero__card {
		padding: 50px 24px 0 !important;
		gap: 32px !important;
	}
	.ocx-solaas-hero__col-text {
		gap: 36px !important;
	}
	.ocx-solaas-hero__content {
		gap: 20px !important;
	}
	.ocx-solaas-hero__heading {
		font-size: 38px !important;
		line-height: 42px !important;
	}
	.ocx-solaas-hero__paragraph {
		font-size: 16px !important;
		line-height: 24px !important;
	}
	.ocx-solaas-hero__stage {
		--stage-scale: 0.68;
	}
}

@media (max-width: 767.98px) {
	.ocx-section.ocx-solaas-hero__section {
		padding: var(--Section-Padding-padding-section-xsmall, 16px) 10px 0 10px !important;
	}
	.ocx-solaas-hero__outer {
		width: 100% !important;
		max-width: 100% !important;
		min-height: auto !important;
		margin: 0 auto !important;
		background: var(--Color-OpenCX-Dune-Light, #CBBB85) !important;
		border-top: var(--Stroke-Hairline, 0.5px) solid var(--Color-OpenCX-Dune-Light, #CBBB85) !important;
		border-left: var(--Stroke-Hairline, 0.5px) solid var(--Color-OpenCX-Dune-Light, #CBBB85) !important;
		border-right: var(--Stroke-Hairline, 0.5px) solid var(--Color-OpenCX-Dune-Light, #CBBB85) !important;
		border-bottom: none !important;
		border-radius: 0 !important;
		box-sizing: border-box !important;
	}
	.ocx-solaas-hero__container {
		width: calc(100% + 1px) !important;
		max-width: none !important;
		min-height: auto !important;
		margin: -0.5px !important;
		border-top: var(--Stroke-Hairline, 0.5px) solid var(--Color-OpenCX-Dune-Light, #CBBB85) !important;
		border-left: var(--Stroke-Hairline, 0.5px) solid var(--Color-OpenCX-Dune-Light, #CBBB85) !important;
		border-right: var(--Stroke-Hairline, 0.5px) solid var(--Color-OpenCX-Dune-Light, #CBBB85) !important;
		border-bottom: none !important;
		border-radius: var(--Radius-Small, 16px) !important;
		background-color: var(--Color-OpenCX-White, #FCFBF9) !important;
		box-sizing: border-box !important;
	}
	.ocx-solaas-hero__card {
		padding: 36px 16px 0 !important;
		gap: 28px !important;
	}
	.ocx-solaas-hero__col-text {
		gap: 24px !important;
	}
	.ocx-solaas-hero__content {
		gap: 16px !important;
	}
	.ocx-solaas-hero__tagline {
		padding: 0 4px !important;
		gap: 6px !important;
	}
	.ocx-solaas-hero__tagline-text {
		font-size: 16px !important;
		line-height: 24px !important;
	}
	.ocx-solaas-hero__bracket {
		width: 18px !important;
		height: 18px !important;
	}
	.ocx-solaas-hero__heading {
		font-size: 28px !important;
		line-height: 34px !important;
	}
	.ocx-solaas-hero__paragraph {
		font-size: 15px !important;
		line-height: 22px !important;
	}
	.ocx-solaas-hero__stage {
		--stage-scale: 0.42;
	}
	.ocx-solaas-hero__card-float {
		display: block !important;
	}
}

@media (max-width: 400px) {
	.ocx-solaas-hero__stage {
		--stage-scale: 0.36;
	}
}

@media (max-width: 350px) {
	.ocx-solaas-hero__stage {
		--stage-scale: 0.32;
	}
}

/*
 * ==========================================================================
 * SolaaS: Solution Benefits (Figma node #12824:16531)
 * ==========================================================================
 */
.ocx-section.ocx-solaas-benefits__section {
	display: flex !important;
	justify-content: center !important;
	align-items: center !important;
	width: 100% !important;
	padding: 0 max(16px, calc((100% - 1280px) / 2)) !important;
	margin: 0 !important;
	background-color: var(--Color-OpenCX-White, #FCFBF9) !important;
	box-sizing: border-box !important;
}

/* Outer Frame with Slate Cyan (#426676) corner reveal (Figma 12824:16532) */
.ocx-solaas-benefits__outer {
	display: flex !important;
	flex-direction: column !important;
	width: 100% !important;
	max-width: var(--Container-container-large, 1280px) !important;
	margin: 0 auto !important;
	background-color: #426676 !important;
	border: var(--Stroke-Hairline, 0.5px) solid var(--Color-OpenCX-Dune-Light, #CBBB85) !important;
	box-sizing: border-box !important;
	position: relative !important;
}

/* Inner Container with 20px rounded corners (Figma 12824:16533) */
.ocx-solaas-benefits__container {
	display: flex !important;
	flex-direction: column !important;
	width: calc(100% + 2px) !important;
	margin: -1px !important;
	border-radius: var(--Radius-Medium, 20px) !important;
	border: var(--Stroke-Hairline, 0.5px) solid var(--Color-OpenCX-Dune-Light, #CBBB85) !important;
	background-color: var(--Color-OpenCX-White, #FCFBF9) !important;
	overflow: hidden !important;
	box-sizing: border-box !important;
}

/* Shared Module Styling */
.ocx-solaas-benefit {
	display: flex !important;
	flex-direction: column !important;
	gap: 36px !important;
	padding: 80px 48px !important;
	box-sizing: border-box !important;
	border-bottom: var(--Stroke-Hairline, 0.5px) solid var(--Color-OpenCX-Dune-Light, #CBBB85) !important;
}

/* Module Themes */
.ocx-solaas-benefit--workflow {
	background-color: #FAF8F4 !important;
	border-radius: var(--Radius-Medium, 20px) var(--Radius-Medium, 20px) 0 0 !important;
}

.ocx-solaas-benefit--cx {
	background-color: #4A2B4F !important;
	color: #F0EBDC !important;
}

.ocx-solaas-benefit--agents {
	background-color: #FAF8F4 !important;
}

.ocx-solaas-benefit--km {
	background-color: #1C495A !important;
	color: #F0EBDC !important;
}

.ocx-solaas-benefit--analytics {
	background-color: #FAF8F4 !important;
	border-bottom: none !important;
	border-radius: 0 0 var(--Radius-Medium, 20px) var(--Radius-Medium, 20px) !important;
}

/* Hero Row (Top row: Text + Image) */
.ocx-solaas-benefit__hero-row {
	display: grid !important;
	gap: 0px 36px !important;
	align-items: start !important;
	width: 100% !important;
	box-sizing: border-box !important;
}

.ocx-solaas-benefit__hero-row--normal {
	grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr) !important;
}

.ocx-solaas-benefit__hero-row--invert {
	grid-template-columns: minmax(0, 1fr) minmax(0, 1.5fr) !important;
}

/* Header Content Column (#12824:16536) */
.ocx-solaas-benefit__header {
	display: flex !important;
	height: 296px !important;
	padding: var(--Section-Padding-padding-section-small, 48px) var(--Section-Padding-padding-section-small, 48px) var(--Section-Padding-padding-section-xsmall, 20px) var(--Section-Padding-padding-section-special, 36px) !important;
	align-items: flex-end !important;
	gap: 32px !important;
	align-self: start !important;
	grid-row: span 1 !important;
	grid-column: span 1 !important;
	justify-self: stretch !important;
	border-radius: 16px !important;
	box-sizing: border-box !important;
}

/* Section Title Group (#12824:16537) */
.ocx-solaas-benefit__title-group {
	display: flex !important;
	flex-direction: column !important;
	gap: 16px !important;
	width: 100% !important;
}

.ocx-solaas-benefit__tagline {
	display: inline-flex !important;
	align-items: center !important;
	gap: 4px !important;
	font-family: var(--wp--preset--font-family--widescreen, widescreen, sans-serif) !important;
	font-size: 22px !important;
	line-height: 1.5 !important;
	font-weight: 400 !important;
}

.ocx-solaas-benefit--workflow .ocx-solaas-benefit__tagline {
	color: #917E41 !important;
}

.ocx-solaas-benefit--cx .ocx-solaas-benefit__tagline {
	color: #00C9C9 !important;
}

.ocx-solaas-benefit--agents .ocx-solaas-benefit__tagline {
	color: #8F459C !important;
}

.ocx-solaas-benefit--km .ocx-solaas-benefit__tagline {
	color: #00C9C9 !important;
}

.ocx-solaas-benefit--analytics .ocx-solaas-benefit__tagline {
	color: #917E41 !important;
}

.ocx-solaas-benefit__bracket {
	width: 24px !important;
	height: 24px !important;
	display: block !important;
	flex-shrink: 0 !important;
}

.ocx-solaas-benefit__title {
	font-family: var(--wp--preset--font-family--widescreen, widescreen, sans-serif) !important;
	font-size: 44px !important;
	line-height: 1.2 !important;
	letter-spacing: -0.01em !important;
	font-weight: 400 !important;
	margin: 0 !important;
}

.ocx-solaas-benefit--agents .ocx-solaas-benefit__title {
	font-size: 50px !important;
}

.ocx-solaas-benefit--workflow .ocx-solaas-benefit__title,
.ocx-solaas-benefit--agents .ocx-solaas-benefit__title,
.ocx-solaas-benefit--analytics .ocx-solaas-benefit__title {
	color: var(--Color-OpenCX-Shark, #162227) !important;
}

.ocx-solaas-benefit--cx .ocx-solaas-benefit__title,
.ocx-solaas-benefit--km .ocx-solaas-benefit__title {
	color: #F0EBDC !important;
}

/* Image Box (#12957:1089) */
.ocx-solaas-benefit__image-box {
	display: flex !important;
	height: 296px !important;
	flex-direction: column !important;
	align-items: center !important;
	gap: 16px !important;
	align-self: start !important;
	grid-row: span 1 !important;
	grid-column: span 1 !important;
	justify-self: stretch !important;
	border-radius: 20px !important;
	overflow: hidden !important;
	box-sizing: border-box !important;
}

.ocx-solaas-benefit--workflow .ocx-solaas-benefit__image-box {
	border: var(--Stroke-Hairline, 0.5px) solid #1C495A !important;
}

.ocx-solaas-benefit--cx .ocx-solaas-benefit__image-box {
	border: var(--Stroke-Hairline, 0.5px) solid #00C9C9 !important;
	border-radius: 30px !important;
	display: flex !important;
	flex-direction: column !important;
	justify-content: flex-end !important;
	align-items: center !important;
	gap: 16px !important;
	flex: 1 0 0 !important;
	align-self: stretch !important;
}

.ocx-solaas-benefit--agents .ocx-solaas-benefit__image-box {
	border: var(--Stroke-Hairline, 0.5px) solid #1C495A !important;
}

.ocx-solaas-benefit--km .ocx-solaas-benefit__image-box {
	border: var(--Stroke-Hairline, 0.5px) solid #00C9C9 !important;
}

.ocx-solaas-benefit--analytics .ocx-solaas-benefit__image-box {
	border: var(--Stroke-Hairline, 0.5px) solid var(--Color-OpenCX-Dune-Light, #CBBB85) !important;
	display: flex !important;
	flex-direction: column !important;
	align-items: flex-end !important;
	gap: 16px !important;
	flex: 1 0 0 !important;
	align-self: stretch !important;
}

.ocx-solaas-benefit__image {
	width: 100% !important;
	height: 100% !important;
	object-fit: cover !important;
	display: block !important;
	border-radius: inherit !important;
}

.ocx-solaas-benefit--workflow .ocx-solaas-benefit__image {
	object-position: center top !important;
}

.ocx-solaas-benefit--cx .ocx-solaas-benefit__image {
	object-position: center bottom !important;
}

.ocx-solaas-benefit--analytics .ocx-solaas-benefit__image {
	object-position: right bottom !important;
}

/* Cards Grid (Bottom row: 3 cards) */
.ocx-solaas-benefit__cards-grid {
	display: grid !important;
	grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
	gap: 36px !important;
	width: 100% !important;
	box-sizing: border-box !important;
}

.ocx-solaas-benefit__card {
	display: flex !important;
	flex-direction: column !important;
	gap: 16px !important;
	padding: 48px 36px 36px !important;
	border-radius: 16px !important;
	box-sizing: border-box !important;
	background: transparent !important;
}

.ocx-solaas-benefit--workflow .ocx-solaas-benefit__card {
	border: var(--Stroke-Hairline, 0.5px) solid #917E41 !important;
}

.ocx-solaas-benefit--cx .ocx-solaas-benefit__card {
	border: var(--Stroke-Hairline, 0.5px) solid var(--Color-OpenCX-Dune-Light, #CBBB85) !important;
}

.ocx-solaas-benefit--agents .ocx-solaas-benefit__card {
	border: var(--Stroke-Hairline, 0.5px) solid var(--Color-OpenCX-Dune, #B69E52) !important;
}

.ocx-solaas-benefit--km .ocx-solaas-benefit__card {
	border: var(--Stroke-Hairline, 0.5px) solid var(--Color-OpenCX-Dune-Light, #CBBB85) !important;
}

.ocx-solaas-benefit--analytics .ocx-solaas-benefit__card {
	border: var(--Stroke-Hairline, 0.5px) solid var(--Color-OpenCX-Dune, #B69E52) !important;
}

.ocx-solaas-benefit__card-header {
	display: flex !important;
	flex-direction: column !important;
	gap: 16px !important;
	align-items: flex-start !important;
}

.ocx-solaas-benefit__card-icon {
	width: 24px !important;
	height: 24px !important;
	display: block !important;
}

.ocx-solaas-benefit--workflow .ocx-solaas-benefit__card-icon {
	color: #917E41 !important;
}

.ocx-solaas-benefit--cx .ocx-solaas-benefit__card-icon {
	color: #CBBB85 !important;
}

.ocx-solaas-benefit--agents .ocx-solaas-benefit__card-icon {
	color: #B69E52 !important;
}

.ocx-solaas-benefit--km .ocx-solaas-benefit__card-icon {
	color: #CBBB85 !important;
}

.ocx-solaas-benefit--analytics .ocx-solaas-benefit__card-icon {
	color: #B69E52 !important;
}

.ocx-solaas-benefit__card-title {
	font-family: var(--wp--preset--font-family--widescreen, widescreen, sans-serif) !important;
	font-size: 24px !important;
	line-height: 1.4 !important;
	font-weight: 300 !important;
	margin: 0 !important;
}

.ocx-solaas-benefit--workflow .ocx-solaas-benefit__card-title,
.ocx-solaas-benefit--agents .ocx-solaas-benefit__card-title,
.ocx-solaas-benefit--analytics .ocx-solaas-benefit__card-title {
	color: var(--Color-OpenCX-Shark, #162227) !important;
}

.ocx-solaas-benefit--cx .ocx-solaas-benefit__card-title,
.ocx-solaas-benefit--km .ocx-solaas-benefit__card-title {
	color: #F0EBDC !important;
}

.ocx-solaas-benefit__card-body {
	font-family: var(--wp--preset--font-family--widescreen, widescreen, sans-serif) !important;
	font-size: 16px !important;
	line-height: 1.5 !important;
	font-weight: 300 !important;
	margin: 0 !important;
}

.ocx-solaas-benefit--workflow .ocx-solaas-benefit__card:first-child .ocx-solaas-benefit__card-body {
	font-size: 18px !important;
}

.ocx-solaas-benefit--workflow .ocx-solaas-benefit__card-body,
.ocx-solaas-benefit--agents .ocx-solaas-benefit__card-body,
.ocx-solaas-benefit--analytics .ocx-solaas-benefit__card-body {
	color: var(--Color-OpenCX-Shark, #162227) !important;
}

.ocx-solaas-benefit--cx .ocx-solaas-benefit__card-body,
.ocx-solaas-benefit--km .ocx-solaas-benefit__card-body {
	color: #F0EBDC !important;
}

/* Bullet List inside Business Impact Card */
.ocx-solaas-benefit__bullets {
	list-style: none !important;
	padding: 0 !important;
	margin: 0 !important;
	display: flex !important;
	flex-direction: column !important;
	gap: 12px !important;
}

.ocx-solaas-benefit__bullets li {
	position: relative !important;
	padding-left: 16px !important;
	font-family: var(--wp--preset--font-family--widescreen, widescreen, sans-serif) !important;
	font-size: 16px !important;
	line-height: 1.5 !important;
	font-weight: 300 !important;
}

.ocx-solaas-benefit--agents .ocx-solaas-benefit__bullets li {
	font-size: 18px !important;
}

.ocx-solaas-benefit__bullets li::before {
	content: "•" !important;
	position: absolute !important;
	left: 0 !important;
	top: 0 !important;
	color: inherit !important;
	font-size: 14px !important;
	line-height: inherit !important;
}

@media (max-width: 991px) {
	.ocx-solaas-benefit {
		padding: 60px 32px !important;
	}
	.ocx-solaas-benefit__hero-row {
		grid-template-columns: 1fr !important;
		height: auto !important;
		gap: 24px !important;
	}
	.ocx-solaas-benefit__header {
		height: auto !important;
		min-height: auto !important;
		padding: var(--Section-Padding-padding-section-small, 32px) var(--Section-Padding-padding-section-small, 32px) var(--Section-Padding-padding-section-xsmall, 16px) var(--Section-Padding-padding-section-special, 28px) !important;
	}
	.ocx-solaas-benefit__image-box {
		height: 260px !important;
	}
	.ocx-solaas-benefit__cards-grid {
		grid-template-columns: 1fr !important;
		gap: 24px !important;
	}
}

@media (max-width: 767.98px) {
	.ocx-solaas-benefit {
		padding: 40px 20px !important;
	}
	.ocx-solaas-benefit__header {
		padding: 24px 16px 16px 16px !important;
	}
	.ocx-solaas-benefit__title {
		font-size: 28px !important;
	}
	.ocx-solaas-benefit--agents .ocx-solaas-benefit__title {
		font-size: 30px !important;
	}
	.ocx-solaas-benefit__image-box {
		height: 220px !important;
	}
	.ocx-solaas-benefit__cards-grid {
		gap: 16px !important;
	}
}

/*
 * ==========================================================================
 * SolaaS: CTA Solution (Figma node #12824:16779)
 * ==========================================================================
 */
.ocx-section.ocx-solaas-cta__section {
	display: flex !important;
	justify-content: center !important;
	align-items: center !important;
	width: 100% !important;
	padding: 0 max(16px, calc((100% - 1280px) / 2)) !important;
	margin: 0 !important;
	background-color: var(--Color-OpenCX-White, #FCFBF9) !important;
	box-sizing: border-box !important;
}

.ocx-solaas-cta__container {
	display: flex !important;
	flex-direction: column !important;
	align-items: center !important;
	justify-content: center !important;
	width: 100% !important;
	max-width: var(--Container-container-large, 1280px) !important;
	min-height: 469px !important;
	margin: 0 auto !important;
	padding: 65px var(--Section-Padding-padding-section-medium, 80px) !important;
	box-sizing: border-box !important;
	background-color: var(--Color-OpenCX-White, #FCFBF9) !important;
	background-image: url('../images/pattern-tile.svg') !important;
	background-repeat: repeat !important;
	background-size: 60px 60px !important;
	border: var(--Stroke-Hairline, 0.5px) solid var(--Color-OpenCX-Dune-Light, #CBBB85) !important;
	border-radius: 0 0 var(--Radius-Medium, 20px) var(--Radius-Medium, 20px) !important;
	position: relative !important;
	text-align: center !important;
}

.ocx-solaas-cta__content {
	display: flex !important;
	flex-direction: column !important;
	align-items: center !important;
	gap: 32px !important;
	max-width: 800px !important;
	width: 100% !important;
	box-sizing: border-box !important;
}

.ocx-solaas-cta__header {
	display: flex !important;
	flex-direction: column !important;
	gap: 24px !important;
	width: 100% !important;
}

.ocx-solaas-cta__heading {
	font-family: var(--wp--preset--font-family--manrope, Manrope, sans-serif) !important;
	font-weight: 500 !important;
	font-size: 52px !important;
	line-height: 1.2 !important;
	letter-spacing: -0.01em !important;
	color: var(--Color-OpenCX-Shark, #162227) !important;
	margin: 0 auto !important;
	max-width: 750px !important;
}

.ocx-solaas-cta__desc {
	font-family: var(--wp--preset--font-family--widescreen, widescreen, sans-serif) !important;
	font-weight: 300 !important;
	font-size: 18px !important;
	line-height: 1.5 !important;
	color: var(--Color-OpenCX-Shark, #162227) !important;
	margin: 0 auto !important;
	max-width: 768px !important;
}

.ocx-solaas-cta__actions {
	display: flex !important;
	justify-content: center !important;
	align-items: center !important;
	gap: 16px !important;
	margin-top: 8px !important;
}

.ocx-solaas-cta__btn {
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	gap: 8px !important;
	box-sizing: border-box !important;
	background-color: var(--Color-OpenCX-Dune, #B69E52) !important;
	color: #FFFFFF !important;
	border: 1px solid var(--Color-OpenCX-Dune, #B69E52) !important;
	padding: 10px 24px !important;
	border-radius: 0 !important;
	font-family: var(--wp--preset--font-family--manrope, Manrope, sans-serif) !important;
	font-size: 16px !important;
	font-weight: 500 !important;
	line-height: 1.5 !important;
	text-decoration: none !important;
	cursor: pointer !important;
	transition: background-color 0.2s ease, border-color 0.2s ease !important;
}

.ocx-solaas-cta__btn:hover {
	background-color: #9E853D !important;
	border-color: #9E853D !important;
	color: #FFFFFF !important;
}

/* Ensure seamless white background on solution & industries page footer */
body:not(.page-about):not(.page-id-72):not(.page-contact):not(.page-id-79):has(.ocx-solaas-cta__section) .ocx-footer,
body:not(.page-about):not(.page-id-72):not(.page-contact):not(.page-id-79):has(.ocx-solaas-cta__section) footer.wp-block-template-part {
	background-color: var(--Color-OpenCX-White, #FCFBF9) !important;
}

/* Responsive adjustments for Benefits & CTA */
@media (max-width: 1024px) {
	.ocx-solaas-benefits__section {
		padding: 0 10px !important;
	}
	.ocx-solaas-benefits__outer {
		width: 100% !important;
		max-width: 100% !important;
		margin: calc(-1 * var(--Stroke-Hairline, 0.5px)) auto 0 !important;
		background: #426676 !important;
		background-color: #426676 !important;
		border: var(--Stroke-Hairline, 0.5px) solid var(--Color-OpenCX-Dune-Light, #CBBB85) !important;
		border-radius: 0 !important;
		box-sizing: border-box !important;
	}
	.ocx-solaas-benefits__container {
		width: calc(100% + 1px) !important;
		max-width: none !important;
		margin: -0.5px !important;
		border: var(--Stroke-Hairline, 0.5px) solid var(--Color-OpenCX-Dune-Light, #CBBB85) !important;
		border-radius: var(--Radius-Small, 16px) !important;
		background: var(--Color-OpenCX-White, #FCFBF9) !important;
		background-color: var(--Color-OpenCX-White, #FCFBF9) !important;
		box-sizing: border-box !important;
	}
	.ocx-solaas-benefit {
		padding: 60px 32px !important;
		gap: 32px !important;
	}
	.ocx-solaas-benefit__hero-row--normal,
	.ocx-solaas-benefit__hero-row--invert {
		grid-template-columns: 1fr !important;
		gap: 24px !important;
	}
	.ocx-solaas-benefit__title {
		font-size: 36px !important;
	}
	.ocx-solaas-benefit--agents .ocx-solaas-benefit__title {
		font-size: 40px !important;
	}
	.ocx-solaas-benefit__image-box {
		height: 240px !important;
	}
	.ocx-solaas-benefit__cards-grid {
		grid-template-columns: 1fr !important;
		gap: 24px !important;
	}
	.ocx-solaas-benefit__card {
		padding: 36px 28px !important;
		gap: 24px !important;
	}
	.ocx-solaas-cta__section {
		padding: 0 10px !important;
	}
	.ocx-solaas-cta__container {
		padding: 64px 32px !important;
		min-height: auto !important;
		width: 100% !important;
		max-width: 100% !important;
		margin: calc(-1 * var(--Stroke-Hairline, 0.5px)) auto 0 !important;
		border: var(--Stroke-Hairline, 0.5px) solid var(--Color-OpenCX-Dune-Light, #CBBB85) !important;
		border-radius: 0 0 var(--Radius-Small, 16px) var(--Radius-Small, 16px) !important;
		box-sizing: border-box !important;
	}
	.ocx-solaas-cta__heading {
		font-size: 40px !important;
	}
}

@media (max-width: 767px) {
	.ocx-solaas-benefits__outer {
		margin: calc(-1 * var(--Stroke-Hairline, 0.5px)) auto 0 !important;
		background: #426676 !important;
		background-color: #426676 !important;
		border: var(--Stroke-Hairline, 0.5px) solid var(--Color-OpenCX-Dune-Light, #CBBB85) !important;
		border-radius: 0 !important;
	}
	.ocx-solaas-benefits__container {
		width: calc(100% + 1px) !important;
		max-width: none !important;
		margin: -0.5px !important;
		border: var(--Stroke-Hairline, 0.5px) solid var(--Color-OpenCX-Dune-Light, #CBBB85) !important;
		border-radius: var(--Radius-Small, 16px) !important;
		background: var(--Color-OpenCX-White, #FCFBF9) !important;
		background-color: var(--Color-OpenCX-White, #FCFBF9) !important;
	}
	.ocx-solaas-cta__container {
		margin: calc(-1 * var(--Stroke-Hairline, 0.5px)) auto 0 !important;
		border: var(--Stroke-Hairline, 0.5px) solid var(--Color-OpenCX-Dune-Light, #CBBB85) !important;
		border-radius: 0 0 var(--Radius-Small, 16px) var(--Radius-Small, 16px) !important;
	}
	.ocx-solaas-benefits__section {
		padding: 0 10px !important;
	}
	.ocx-solaas-benefit {
		padding: 40px 16px !important;
		gap: 24px !important;
	}
	.ocx-solaas-benefit__tagline {
		font-size: 18px !important;
	}
	.ocx-solaas-benefit__title {
		font-size: 28px !important;
		line-height: 1.25 !important;
	}
	.ocx-solaas-benefit--agents .ocx-solaas-benefit__title {
		font-size: 30px !important;
	}
	.ocx-solaas-benefit__image-box {
		height: 200px !important;
		border-radius: 16px !important;
	}
	.ocx-solaas-benefit__card {
		padding: 28px 20px !important;
		gap: 16px !important;
		border-radius: 12px !important;
	}
	.ocx-solaas-benefit__card-title {
		font-size: 20px !important;
	}
	.ocx-solaas-benefit__card-body,
	.ocx-solaas-benefit__bullets li {
		font-size: 15px !important;
	}
	.ocx-solaas-cta__section {
		padding: 0 10px !important;
	}
	.ocx-solaas-cta__container {
		padding: 48px 20px !important;
	}
	.ocx-solaas-cta__heading {
		font-size: 28px !important;
		line-height: 1.25 !important;
		max-width: 100% !important;
	}
	.ocx-solaas-cta__desc {
		font-size: 15px !important;
		max-width: 100% !important;
	}
}


/*
 * Header action buttons.
 *
 * Figma "Button" (#10310:970) is a flex box, not an inline-block: the label is
 * centred on both axes with an 8px gap so an optional icon stays on the same
 * baseline. Core's `.wp-block-button__link` is inline-block with inherited
 * Roboto, so both the layout and the type have to be stated here.
 *
 * The background comes from the real Figma token instead of the `gold` preset.
 * The preset stays in theme.json as the value source; tokens.css aliases it.
 */
.wp-block-button.ocx-btn--primary .wp-block-button__link {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	box-sizing: border-box;
	background-color: var(--Color-Husk);
	color: var(--Color-Spring-Wood);
	border: 0;
	padding: 10px 24px;
	font-family: var(--wp--preset--font-family--widescreen);
	font-size: 16px;
	font-weight: 300;
	line-height: 1.5;
}

/*
 * Figma's secondary button pairs an off-white fill with a 1px Ambar border and
 * sets the label in Widescreen. `.wp-block-button__link` is underlined by core
 * on hover, which a filled control should not do.
 */
.wp-block-button.ocx-btn--secondary .wp-block-button__link {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	box-sizing: border-box;
	background: var(--Color-OpenCX-White-Lightest);
	color: var(--wp--preset--color--navy);
	border: 1px solid var(--Color-Ambar);
	padding: 10px 24px;
	font-family: var(--wp--preset--font-family--widescreen);
	font-size: 16px;
	line-height: 1.5;
}

.wp-block-button.ocx-btn--secondary .wp-block-button__link:hover {
	text-decoration: none;
}

.wp-block-button.ocx-btn--primary .wp-block-button__link:hover {
	text-decoration: none;
}

/*
 * Figma's Button component with Alternate=True (#4179:8942), the one used by
 * "Header / 90 /". It is a third variant, not a state of the two above: white
 * fill AND a 1px white stroke, with the label in #000. The hero's primary is
 * Husk on Spring Wood, so the alternate cannot be derived from it with a hover
 * or an opacity either.
 *
 * The label is Manrope 500 (Text/Regular/Medium) where the hero's primary is
 * Manrope 300, and the component declares no radius, so it stays 0 like the
 * other two. The hover rule is here rather than shared because core underlines
 * .wp-block-button__link on hover and a filled control should not do that.
 */
.wp-block-button.ocx-btn--invert .wp-block-button__link {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	box-sizing: border-box;
	background-color: var(--Color-White, #fff);
	color: var(--Color-Scheme-1-Text, #000);
	border: 1px solid var(--Color-White, #fff);
	border-radius: 0;
	padding: 10px 24px;
	font-family: var(--wp--preset--font-family--widescreen);
	font-size: var(--Text-Sizes-Text-Regular, 16px);
	font-weight: 500;
	line-height: 1.5;
}

.wp-block-button.ocx-btn--invert .wp-block-button__link:hover {
	text-decoration: none;
}

/*
 * Hero actions column.
 *
 * Figma "Actions" (#10218:66911) is a fixed 769px column that hugs its
 * content, and the form inside is 768px. A core/group has no width dimension
 * attribute, and the Actions column has to stay a fixed width at 1440 while
 * still shrinking on narrow screens, so the value lives here.
 */
/*
 * Hero containers hierarchy (Figma 10218:66905 / 10218:66906 / 12287:67722 / 12287:67723)
 */
.ocx-hero__container {
	position: relative;
	display: flex;
	width: 1280px;
	height: 727px;
	max-width: var(--Container-container-large, 1280px);
	flex-direction: column;
	justify-content: center;
	align-items: center;
	gap: 80px;
	border: var(--Stroke-Hairline, 0.5px) solid var(--Color-Blackberry-Light, #8F459C);
	background: var(--Color-OpenCX-White, #FCFBF9);
	margin-inline: auto;
	box-sizing: border-box;
}

.ocx-hero__frame {
	position: relative;
	display: flex;
	width: calc(100% + (2 * var(--Stroke-Hairline, 0.5px))) !important;
	height: calc(100% + (2 * var(--Stroke-Hairline, 0.5px))) !important;
	margin: calc(-1 * var(--Stroke-Hairline, 0.5px)) !important;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	gap: 80px;
	flex-shrink: 0;
	border-radius: var(--Radius-Medium, 20px);
	border: var(--Stroke-Hairline, 0.5px) solid var(--Color-OpenCX-Dune-Light, #CBBB85);
	background: var(--Color-Amber-Light, #FAF8F4);
	box-sizing: border-box;
}

.ocx-hero__column {
	display: flex;
	width: 1080px;
	max-width: 100%;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	gap: 32px;
	border-radius: 16px;
	box-sizing: border-box;
}

.ocx-hero__logo-frame {
	display: flex;
	padding: 0 282px 19px 282px;
	flex-direction: column;
	align-items: center;
	gap: 10px;
	align-self: stretch;
	box-sizing: border-box;
}

.ocx-hero__actions {
	display: flex;
	width: 1080px;
	max-width: 100%;
	height: 166px;
	justify-content: center;
	align-items: center;
	align-self: stretch;
	box-sizing: border-box;
}

.ocx-hero__actions > * {
	align-self: stretch;
}

.ocx-hero__actions .wp-block-image {
	text-align: center;
}

.ocx-hero__form {
	position: relative;
	display: flex;
	flex-direction: column;
	justify-content: flex-start;
	width: 1080px;
	max-width: 100%;
	height: 166px;
	border-radius: var(--Radius-Medium, 20px);
	border: 1px solid var(--Color-OpenCX-Dune-Lighter, #F0EBDC);
	background: #FFFFFF;
	box-sizing: border-box;
}

.wp-block-group.ocx-hero__controls {
	position: absolute;
	bottom: 25px;
	left: 25px;
	right: 25px;
	display: flex;
	justify-content: space-between;
	align-items: center;
	box-sizing: border-box;
	margin: 0;
	padding: 0;
}

.ocx-hero__right-tools {
	display: flex;
	align-items: center;
	gap: 14px;
}

@media (max-width: 1199.98px) {
	.ocx-hero {
		padding-left: 10px !important;
		padding-right: 10px !important;
		padding-top: 20px !important;
		padding-bottom: 0 !important;
		width: 100% !important;
		box-sizing: border-box !important;
	}

	.ocx-hero__container,
	.ocx-hero__frame {
		width: 100% !important;
		max-width: 100% !important;
		height: auto !important;
		min-height: auto !important;
		padding: 40px 20px !important;
		gap: 40px !important;
		margin: 0 auto !important;
		box-sizing: border-box !important;
	}

	.ocx-hero__column {
		width: 100% !important;
	}

	.ocx-hero__logo-frame {
		padding: 0 20px 19px 20px !important;
	}

	.ocx-hero__actions,
	.ocx-hero__form {
		width: 100% !important;
		height: auto !important;
		min-height: 166px;
	}

	.wp-block-group.ocx-hero__controls {
		position: static;
		padding: 16px 20px 20px 20px;
	}
}

.wp-block-button.ocx-hero__submit {
	margin: 0;
}

.ocx-hero__submit .wp-block-button__link {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 36px;
	height: 36px;
	padding: 0;
	background: transparent;
	border: 0;
	border-radius: 50%;
	cursor: pointer;
}

.ocx-hero__submit .ocx-hero__arrow {
	display: block;
	width: 36px;
	height: 36px;
}

.wp-block-button.ocx-hero__mic,
.ocx-hero__mic {
	display: none !important;
	margin: 0;
}

.ocx-hero__mic .wp-block-button__link {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 24px;
	height: 24px;
	padding: 0;
	background: transparent;
	border: 0;
	border-radius: 0;
	cursor: pointer;
}

.ocx-hero__mic .ocx-hero__mic-icon {
	display: block;
	width: 24px;
	height: 24px;
}

.ocx-hero__logo-361 {
	width: 231px;
	height: 55px;
	aspect-ratio: 21 / 5;
	margin: 0 auto;
	display: block;
}

.ocx-hero__logo-361 img {
	width: 231px;
	height: 55px;
	aspect-ratio: 21 / 5;
	object-fit: contain;
	display: block;
	margin: 0 auto;
	background: transparent !important;
}

.ocx-hero__logo-lottie {
	width: 269px;
	max-width: 100%;
	height: 84px;
	margin: 0 auto;
	display: flex;
	align-items: center;
	justify-content: center;
	position: relative;
	box-sizing: border-box;
}

.ocx-hero__logo-lottie svg {
	width: 100% !important;
	height: 100% !important;
	display: block;
}

.ocx-hero__logo {
	width: 147px;
	align-self: center;
}

.ocx-hero__logo img {
	width: 147px;
	height: auto;
	display: block;
}

.ocx-hero__submit .wp-block-button__link:focus-visible {
	outline: 2px solid var(--Color-Scheme-1-Text);
	outline-offset: 4px;
}

/*
 * Section band: full-bleed column with the content centred on the cross axis.
 *
 * Only three of the spec's properties live here, and the reason is that the
 * block attributes can carry the rest without hardcoding a single value:
 * `layout.type:flex` + `orientation:vertical` give display:flex and
 * flex-direction:column, `justifyContent:center` maps to align-items:center in a
 * vertical flex, `spacing.blockGap:80px` gives the gap, and `alignFullWidth`
 * already stretches it. Putting those in CSS as well would duplicate what the
 * editor UI writes, so the Site Editor stays the single source for them.
 *
 * The padding has to be here and not in `style.spacing.padding`, because the
 * block attribute would bake in a literal 64px and the mobile breakpoint of
 * --Page-Padding-padding-global is 20px. The same applies to the background:
 * a `color.background` attribute can only point at a theme.json preset, not at
 * --Color-Scheme-1-Background.
 *
 * `.ocx-section` is the box on its own. The two sizing strategies the specs ask
 * for are modifiers on top of it, so a third section with either one does not
 * repeat the padding or the background.
 */
.ocx-section {
	box-sizing: border-box;
	padding: var(--Section-Padding-padding-section-medium, 80px) var(--Page-Padding-padding-global, 64px);
	background: var(--Color-Scheme-1-Background, #fff);
}

/*
 * `--frame` carries `width:1440px`, the Figma frame width, rather than
 * `align-self:stretch`. It only behaves with `max-width:100%` and
 * `box-sizing:border-box`: without them the 64px of horizontal padding is added
 * on top of the 1440 and the box is 1568 wide, overflowing every viewport below
 * 1440. This is the same trick .ocx-header uses with its 1441px.
 *
 * Note that above 1440 this section stops growing while a `--stretch` one keeps
 * going, so the two are only interchangeable while the design width is the
 * widest viewport. On a 1920 screen the fixed one is 1440 and sits at the left
 * edge.
 */
.ocx-section--frame {
	width: 1440px;
	max-width: 100%;
}

/*
 * `--stretch` is the other sizing strategy from the specs, and the one that has
 * no overflow maths attached: `alignFullWidth` on the block already makes the
 * wrapper full bleed, so stretching is just the default. It is written out
 * because the spec names it.
 *
 * `align-items:stretch` is not cosmetic. Core emits `align-items:flex-start` for
 * a vertical group with no `layout.justifyContent`, so a full-bleed section
 * still shrink-wraps its child to the child's max-content width: the Container
 * measured 864px instead of the 1312px of content width, and the Card with it.
 * Figma's frame is alignItems:stretch, and without this the section cannot fill
 * its own padding box.
 */
.ocx-section--stretch {
	align-self: stretch;
	align-items: stretch;
}

/*
 * Figma "Layout / 71 /" (#10218:67647) is padded with padding-section-large, not
 * the medium that `.ocx-section` bakes in, so the vertical padding is the single
 * thing this modifier changes. Writing it as a longhand pair rather than a new
 * shorthand keeps the horizontal side inherited from `--Page-Padding-padding-global`
 * and picks up the 112 -> 64 swap of the token for free.
 */
.ocx-section--large {
	padding-top: var(--Section-Padding-padding-section-large, 112px);
	padding-bottom: var(--Section-Padding-padding-section-large, 112px);
}

/*
 * Figma "Header / 90 /" (#10218:67151) and its children.
 *
 * The frame is alignItems:stretch, not center, so the section group carries no
 * `justifyContent`: its single child (Container) has to fill the 1312px of
 * content width. That is also why the earlier hand-written spec said center, but
 * the frame itself does not.
 *
 * The Card is the only box in the tree with a real paint: #4C4C4C, 16px radius,
 * 640px tall, and the Column inside it is a fixed 736px. 640 is a FIXED height in
 * Figma, which `dimensions.minHeight` only approximates, but a fixed height would
 * clip the text as soon as the copy wraps differently or the viewport narrows.
 *
 * The Card's vertical centring cannot come from the block attributes: for a
 * vertical `wp:group`, core compiles `layout.justifyContent` into
 * `align-items`, so `center` would centre the Column horizontally and leave it
 * pinned to the top. Main-axis centring is only reachable from here.
 *
 * The 64px horizontal inset is the page padding token rather than a literal, so
 * the Card inset follows 64 -> 20 at the mobile breakpoint. Figma only defines
 * the desktop value; 20 is this theme's documented mobile equivalent.
 */

/*
 * Figma's Container is alignItems:stretch with a Card that is alignSelf:stretch,
 * which together are what make the Card span the full 1312px. Core's default
 * align-items:flex-start instead shrink-wraps both to the Column's 736px, which
 * measured a 864px Container inside a 1312px content box.
 *
 * `width:100%` is the part that actually has to be written, on both boxes, and
 * `align-items:stretch` alone is not enough. The Column carries a definite
 * `width:736px`, which becomes the Card's min-content floor, so a stretched Card
 * still resolved to 736 + 40 = 776 and pushed a 768px viewport into horizontal
 * scroll. `min-width:0` does not release it either, because the Column's
 * `max-width:100%` is resolved against a Card width that is itself still being
 * computed; Chrome settles that cycle in favour of max-content. Giving the Card
 * a definite 100% breaks the cycle, its content box becomes known, and the
 * Column's max-width:100% finally has something to resolve against. Measured
 * with only one of the two widths set: Container 728 / Card 776 / overflow.
 *
 * Both boxes keep `min-width:0` so that a long unbreakable string in the copy
 * can still be handled by the browser instead of pinning the floor.
 */
/*
 * Section: Textured Divider (Figma Component Set 12522:83153)
 * Variant 1 (Default / Property 1=Default): background #F8F6F0 (Dune Lightest)
 * Variant 2 (Property 1=Variant2): background #FCFBF9 (OpenCX White)
 */
.ocx-textured-divider {
	display: flex;
	justify-content: center;
	align-items: center;
	width: 100%;
	height: var(--Section-Padding-padding-section-medium, 80px);
	min-height: var(--Section-Padding-padding-section-medium, 80px);
	padding: 0 var(--Section-Padding-padding-section-medium, 80px);
	background-color: var(--Color-OpenCX-Dune-Lightest, #F8F6F0);
	box-sizing: border-box;
}

.ocx-textured-divider--variant-2,
.ocx-textured-divider[data-variant="2"],
.page-id-61 .ocx-textured-divider,
.page-template-page-ecosystem .ocx-textured-divider {
	background-color: var(--Color-OpenCX-White, #FCFBF9) !important;
}

.ocx-textured-divider__container {
	display: block;
	width: 100%;
	max-width: var(--Container-container-large, 1280px);
	height: var(--Section-Padding-padding-section-medium, 80px);
	min-height: var(--Section-Padding-padding-section-medium, 80px);
	margin-inline: auto;
	border-left: var(--Stroke-Hairline, 0.5px) solid var(--Color-OpenCX-Dune-Light, #CBBB85);
	border-right: var(--Stroke-Hairline, 0.5px) solid var(--Color-OpenCX-Dune-Light, #CBBB85);
	box-sizing: border-box;
	background-image: url('../images/pattern-tile.svg');
	background-repeat: repeat;
	background-size: 60px 60px;
}

/*
 * Section: Hero - Value proposition (Figma 10218:67151)
 */
.ocx-value-prop {
	padding: 0 80px;
	background-color: var(--Color-OpenCX-Dune-Lightest, #F8F6F0);
	display: flex;
	justify-content: center;
	align-items: center;
}

.ocx-h90__outer {
	display: flex;
	width: 1280px;
	height: 617px;
	min-height: 617px;
	max-width: var(--Container-container-large, 1280px);
	flex-direction: column;
	justify-content: center;
	align-items: center;
	margin-inline: auto;
	border: var(--Stroke-Hairline, 0.5px) solid var(--Color-Blackberry-Light, #8F459C) !important;
	background: var(--Color-OpenCX-Dune-Light, #CBBB85) !important;
	position: relative;
	box-sizing: border-box;
}

.ocx-h90__container {
	position: relative;
	display: flex;
	width: calc(100% + (2 * var(--Stroke-Hairline, 0.5px))) !important;
	height: calc(100% + (2 * var(--Stroke-Hairline, 0.5px))) !important;
	margin: calc(-1 * var(--Stroke-Hairline, 0.5px)) !important;
	max-width: none !important;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	flex-shrink: 0;
	border-radius: var(--Radius-Medium, 20px);
	border: var(--Stroke-Hairline, 0.5px) solid var(--Color-OpenCX-Dune-Light, #CBBB85);
	background: var(--Color-Amber-Light, #FAF8F4);
	padding: 80px;
	box-sizing: border-box;
}

.ocx-h90__card {
	display: flex;
	flex-direction: row;
	justify-content: space-between;
	align-items: center;
	width: 1120px;
	max-width: 100%;
	min-height: 457px;
	box-sizing: border-box;
	gap: 40px;
}

.ocx-h90__column--left {
	display: flex;
	flex-direction: column;
	width: 652px;
	max-width: 100%;
	gap: 32px;
	box-sizing: border-box;
}

.ocx-h90__content {
	display: flex;
	flex-direction: column;
	gap: 24px;
}

.ocx-h90__card .wp-block-heading {
	margin: 0;
	font-family: var(--wp--preset--font-family--widescreen, "Widescreen", sans-serif);
	font-size: 55px;
	font-weight: 400;
	line-height: 55px;
	letter-spacing: -1.65px;
	color: #162227;
}

.ocx-h90__card .wp-block-heading .ocx-blackberry {
	color: var(--Color-Blackberry-Light, #8F459C);
	font-family: var(--wp--preset--font-family--widescreen-ex, "widescreen-ex", sans-serif);
	letter-spacing: -0.03em;
}

.ocx-h90__card p {
	margin: 0;
	font-family: var(--wp--preset--font-family--widescreen, "Widescreen", sans-serif);
	font-size: 18px;
	font-weight: 300;
	line-height: 27px;
	letter-spacing: 0px;
	color: #162227;
}

.ocx-h90__column--right {
	display: flex;
	justify-content: center;
	align-items: center;
	width: 418px;
	max-width: 100%;
	box-sizing: border-box;
}

.ocx-h90__image {
	width: 332px;
	height: 457px;
	max-width: 100%;
	margin: 0 auto;
}

.ocx-h90__image img {
	width: 332px;
	height: 457px;
	max-width: 100%;
	object-fit: contain;
	display: block;
}

.ocx-btn--dune .wp-block-button__link {
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	width: auto !important;
	min-width: 129px !important;
	height: 44px !important;
	padding: 10px 24px !important;
	white-space: nowrap !important;
	background: var(--Color-OpenCX-Dune-Lighter, #F0EBDC) !important;
	border: 1px solid var(--Color-OpenCX-Dune-Light, #CBBB85) !important;
	border-radius: 0px !important;
	color: var(--Color-OpenCX-Dune, #B69E52) !important;
	font-family: var(--wp--preset--font-family--widescreen, "Widescreen", sans-serif) !important;
	font-size: 16px !important;
	font-weight: 300 !important;
	line-height: 24px !important;
	text-decoration: none !important;
	box-sizing: border-box !important;
	transition: background-color 0.2s ease, border-color 0.2s ease !important;
}

.ocx-btn--dune .wp-block-button__link:hover {
	background: #e6dfcc !important;
	border-color: #b69e52 !important;
}

@media (max-width: 1199.98px) {
	.ocx-textured-divider,
	.ocx-value-prop {
		padding: 0 10px !important;
		width: 100% !important;
		box-sizing: border-box !important;
	}

	.ocx-textured-divider__container {
		width: 100% !important;
		max-width: 100% !important;
		margin: 0 auto !important;
		border-left: 0.5px solid var(--Color-OpenCX-Dune-Light, #CBBB85) !important;
		border-right: 0.5px solid var(--Color-OpenCX-Dune-Light, #CBBB85) !important;
		border-top: none !important;
		border-bottom: none !important;
		box-sizing: border-box !important;
	}

	.ocx-h90__outer {
		width: 100% !important;
		max-width: 100% !important;
		min-height: auto !important;
		height: auto !important;
		padding: 0 !important;
		margin: 0 auto !important;
		box-sizing: border-box !important;
	}

	.ocx-h90__container {
		width: 100% !important;
		max-width: 100% !important;
		min-height: auto !important;
		height: auto !important;
		padding: 40px 20px !important;
		margin: 0 auto !important;
		box-sizing: border-box !important;
	}

	.ocx-h90__card {
		flex-direction: column !important;
		width: 100% !important;
		min-height: auto !important;
		gap: 40px !important;
	}

	.ocx-h90__column--left,
	.ocx-h90__column--right {
		width: 100% !important;
	}

	.ocx-h90__card .wp-block-heading {
		font-size: 36px !important;
		line-height: 40px !important;
	}

	.ocx-h90__image,
	.ocx-h90__image img {
		width: 100% !important;
		max-width: 332px !important;
		height: auto !important;
	}
}

/*
 * Section: Problem (Figma 10218:67647)
 */
.ocx-problem {
	width: 100%;
	min-height: 308px;
	padding: 0 80px;
	background-color: var(--Color-OpenCX-Dune-Lightest, #F8F6F0);
	display: flex;
	justify-content: center;
	align-items: center;
	box-sizing: border-box;
}

.ocx-problem__container {
	position: relative;
	display: flex;
	width: 100%;
	max-width: var(--Container-container-large, 1280px);
	min-height: 308px;
	height: auto;
	justify-content: center;
	align-items: center;
	margin-inline: auto;
	border: var(--Stroke-Hairline, 0.5px) solid var(--Color-OpenCX-Dune-Light, #CBBB85) !important;
	background: var(--Color-OpenCX-White, #FCFBF9);
	box-sizing: border-box;
}

.ocx-problem__component {
	display: flex;
	flex-direction: row;
	justify-content: center;
	align-items: flex-start;
	width: 1080px;
	max-width: 100%;
	height: auto;
	box-sizing: border-box;
}

.ocx-problem__col--title {
	display: flex;
	flex-direction: column;
	justify-content: flex-start;
	width: 461px;
	min-height: 308px;
	height: auto;
	padding: 48px;
	border-radius: var(--Radius-Medium, 20px);
	background: var(--Color-OpenCX-Dune-Lightest, #F8F6F0);
	border: var(--Stroke-Hairline, 0.5px) solid var(--Color-OpenCX-Dune-Light, #CBBB85);
	position: -webkit-sticky;
	position: sticky;
	top: 120px;
	align-self: flex-start;
	z-index: 2;
	box-sizing: border-box;
}

.ocx-problem__col--title .wp-block-heading {
	margin: 0;
	font-family: var(--wp--preset--font-family--widescreen, "Widescreen", sans-serif);
	font-size: 44px;
	font-weight: 400;
	line-height: 52.8px;
	letter-spacing: -0.44px;
	color: var(--Color-OpenCX-Dune, #B69E52);
	text-align: left;
}

.ocx-problem__col--text {
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	width: 619px;
	min-height: 308px;
	align-self: stretch;
	height: auto;
	padding: 48px;
	margin-left: -1px;
	border-radius: var(--Radius-Medium, 20px);
	background: var(--Color-OpenCX-Dune-Lightest, #F8F6F0);
	border: var(--Stroke-Hairline, 0.5px) solid var(--Color-OpenCX-Dune-Light, #CBBB85);
	box-sizing: border-box;
}

.ocx-problem__col--text p {
	margin: 0;
	font-family: var(--wp--preset--font-family--widescreen, "Widescreen", sans-serif);
	font-size: 18px;
	font-weight: 300;
	line-height: 27px;
	color: #162227;
	text-align: left;
}

@media (min-width: 992px) and (max-width: 1279.98px) {
	.ocx-problem {
		padding: 0 10px !important;
		width: 100% !important;
		box-sizing: border-box !important;
	}

	.ocx-problem__container {
		width: 100% !important;
		max-width: 100% !important;
		margin: 0 auto !important;
		box-sizing: border-box !important;
	}

	.ocx-problem__component {
		width: 100% !important;
		max-width: 100% !important;
	}

	.ocx-problem__col--title {
		flex: 0 0 43% !important;
		width: 43% !important;
		padding: 40px 32px !important;
	}

	.ocx-problem__col--title .wp-block-heading {
		font-size: clamp(32px, 3.2vw, 40px) !important;
		line-height: 1.2em !important;
	}

	.ocx-problem__col--text {
		flex: 0 0 calc(57% + 1px) !important;
		width: calc(57% + 1px) !important;
		padding: 40px 32px !important;
	}
}

/*
 * Section: Meet OpenCX (Figma 10218:68525)
 */
.ocx-meet {
	width: 100%;
	min-height: 609px;
	padding: 0 80px;
	background-color: var(--Color-OpenCX-Dune-Lightest, #F8F6F0);
	display: flex;
	justify-content: center;
	align-items: center;
	box-sizing: border-box;
}

.ocx-meet__container {
	position: relative;
	display: flex;
	width: 1280px;
	min-height: 609px;
	height: 609px;
	max-width: var(--Container-container-large, 1280px);
	justify-content: center;
	align-items: center;
	margin-inline: auto;
	border: var(--Stroke-Hairline, 0.5px) solid var(--Color-OpenCX-Dune-Light, #CBBB85);
	background: var(--Color-OpenCX-Dune-Lighter, #F0EBDC);
	box-sizing: border-box;
}

.ocx-meet__card {
	position: relative;
	display: flex;
	flex-direction: row;
	justify-content: center;
	align-items: center;
	width: calc(100% + (2 * var(--Stroke-Hairline, 0.5px))) !important;
	height: calc(100% + (2 * var(--Stroke-Hairline, 0.5px))) !important;
	margin: calc(-1 * var(--Stroke-Hairline, 0.5px)) !important;
	padding: 80px 0px;
	border-radius: var(--Radius-Medium, 20px);
	background-color: var(--Color-Blackberry-Light, #8F459C);
	gap: 40px;
	box-sizing: border-box;
}

.ocx-meet__graphic {
	display: flex;
	justify-content: center;
	align-items: center;
	width: 560px;
	height: auto;
	box-sizing: border-box;
}

.ocx-meet__graphic .wp-block-image,
.ocx-meet__graphic img {
	width: 461px !important;
	height: 461px !important;
	max-width: 100%;
	object-fit: contain;
	display: block;
	margin: 0 auto;
}

.ocx-meet__column--right {
	display: flex !important;
	flex-direction: column !important;
	flex-wrap: nowrap !important;
	justify-content: center !important;
	align-items: flex-start !important;
	width: 560px !important;
	max-width: 560px !important;
	height: auto !important;
	min-height: 448px;
	gap: 32px !important;
	box-sizing: border-box !important;
}

.ocx-meet__column--right > * {
	margin: 0 !important;
}

.ocx-meet__column--right .wp-block-buttons {
	position: static !important;
	display: flex !important;
	flex-wrap: nowrap !important;
	transform: none !important;
	margin: 0 !important;
	width: auto !important;
}

.ocx-meet__content {
	display: flex !important;
	flex-direction: column !important;
	gap: 24px !important;
	width: 100% !important;
}

.ocx-meet__content .wp-block-heading {
	margin: 0 !important;
	color: var(--Color-OpenCX-White, #FCFBF9) !important;
	font-family: var(--wp--preset--font-family--widescreen, "Widescreen", sans-serif) !important;
	font-size: 55px !important;
	font-style: normal !important;
	font-weight: 400 !important;
	line-height: 1 !important; /* 55px */
	letter-spacing: -0.55px !important;
	text-align: left !important;
}

.ocx-meet__content .wp-block-heading .ocx-meet__accent {
	color: var(--Color-OpenCX-Dune-Light, #CBBB85) !important;
	font-family: var(--wp--preset--font-family--widescreen-ex, "widescreen-ex", sans-serif) !important;
	font-size: 55px !important;
	font-style: normal !important;
	font-weight: 400 !important;
	line-height: 1 !important;
	letter-spacing: -1.65px !important;
}

.ocx-meet__content p {
	margin: 0 !important;
	font-family: var(--wp--preset--font-family--widescreen, "Widescreen", sans-serif) !important;
	font-size: 18px !important;
	font-weight: 300 !important;
	line-height: 27px !important; /* 1.5 */
	color: var(--Color-OpenCX-White, #FCFBF9) !important;
	text-align: left !important;
}

.ocx-meet__column--right .ocx-btn--meet {
	margin: 0 !important;
}

.ocx-meet__column--right .ocx-btn--meet .wp-block-button__link {
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	width: auto !important;
	min-width: 129px !important;
	height: 44px !important;
	padding: 10px 24px !important;
	background-color: var(--Color-OpenCX-Dune, #B69E52) !important;
	border: 1px solid var(--Color-OpenCX-Dune, #B69E52) !important;
	border-radius: 0px !important;
	color: var(--Color-OpenCX-White, #FCFBF9) !important;
	font-family: var(--wp--preset--font-family--widescreen, "Widescreen", sans-serif) !important;
	font-size: 16px !important;
	font-weight: 400 !important;
	line-height: 24px !important;
	text-decoration: none !important;
	white-space: nowrap !important;
	box-sizing: border-box !important;
	transition: background-color 0.2s ease, border-color 0.2s ease !important;
}

.ocx-meet__column--right .ocx-btn--meet .wp-block-button__link:hover {
	background-color: #9a8442 !important;
	border-color: #9a8442 !important;
}

@media (max-width: 1199.98px) {
	.ocx-meet {
		padding: 0 10px !important;
	}

	.ocx-meet__container {
		width: 100% !important;
		max-width: 100% !important;
		margin: 0 auto !important;
		height: auto !important;
		min-height: auto !important;
	}

	.ocx-meet__card {
		flex-direction: column !important;
		width: 100% !important;
		height: auto !important;
		min-height: auto !important;
		padding: 40px 20px !important;
		gap: 32px !important;
	}

	.ocx-meet__graphic,
	.ocx-meet__graphic img {
		width: 100% !important;
		max-width: 440px !important;
		height: auto !important;
	}

	.ocx-meet__column--right {
		width: 100% !important;
		height: auto !important;
	}

	.ocx-meet__content .wp-block-heading {
		font-size: 36px !important;
		line-height: 40px !important;
	}

	.ocx-meet__content .wp-block-heading .ocx-meet__accent {
		font-size: 36px !important;
		line-height: 40px !important;
		letter-spacing: -1px !important;
	}
}

/*
 * Section: How It Works / Human Understanding First (Figma 10218:68751 / 10218:66034)
 */
.ocx-how-it-works {
	width: 100%;
	padding: 0 80px;
	background-color: var(--Color-OpenCX-Dune-Lightest, #F8F6F0);
	display: flex;
	justify-content: center;
	align-items: center;
	box-sizing: border-box;
}

.ocx-how-it-works__outer {
	position: relative;
	display: flex !important;
	width: 1280px !important;
	max-width: var(--Container-container-large, 1280px) !important;
	min-height: 726px !important;
	height: auto !important;
	flex-direction: column !important;
	justify-content: center !important;
	align-items: center !important;
	margin-inline: auto !important;
	border: var(--Stroke-Hairline, 0.5px) solid var(--Color-OpenCX-Dune-Light, #CBBB85) !important;
	background: var(--Color-OpenCX-White, #FCFBF9) !important;
	box-sizing: border-box !important;
}

.ocx-how-it-works__card {
	position: relative;
	display: flex !important;
	flex-direction: column !important;
	flex-wrap: nowrap !important;
	justify-content: center !important;
	align-items: center !important;
	width: calc(100% + (2 * var(--Stroke-Hairline, 0.5px))) !important;
	min-height: 726px !important;
	height: auto !important;
	margin: calc(-1 * var(--Stroke-Hairline, 0.5px)) !important;
	padding: 49px 0 !important;
	border-radius: var(--Radius-Medium, 20px) !important;
	border: var(--Stroke-Hairline, 0.5px) solid var(--Color-OpenCX-Dune-Light, #CBBB85) !important;
	background: var(--Color-OpenCX-Dune-Lightest, #F8F6F0) !important;
	gap: 64px !important;
	box-sizing: border-box !important;
}

.ocx-how-it-works__header {
	width: 1280px !important;
	max-width: 100% !important;
	text-align: center !important;
	margin: 0 !important;
}

.ocx-how-it-works__heading {
	margin: 0 !important;
	font-family: var(--wp--preset--font-family--widescreen, "Widescreen", sans-serif) !important;
	font-size: 55px !important;
	font-weight: 400 !important;
	line-height: 1 !important;
	letter-spacing: -0.55px !important;
	color: #162227 !important;
	text-align: center !important;
}

.ocx-how-it-works__accent {
	font-family: var(--wp--preset--font-family--widescreen-ex, "widescreen-ex", sans-serif) !important;
	color: var(--Color-OpenCX-Dune, #B69E52) !important;
	letter-spacing: -1.65px !important;
}

.ocx-how-it-works__body {
	display: flex !important;
	flex-direction: row !important;
	flex-wrap: nowrap !important;
	justify-content: center !important;
	align-items: center !important;
	width: 1280px !important;
	max-width: 100% !important;
	padding: 0 48px !important;
	gap: 40px !important;
	box-sizing: border-box !important;
	margin: 0 !important;
}

.ocx-how-it-works__media-col {
	width: 459px !important;
	max-width: 459px !important;
	height: 452px !important;
	flex: 0 0 459px !important;
	border-radius: var(--Radius-Medium, 20px) !important;
	background: var(--Color-OpenCX-White, #FCFBF9) !important;
	border: var(--Stroke-Hairline, 0.5px) solid var(--Color-OpenCX-Dune-Light, #CBBB85) !important;
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	box-sizing: border-box !important;
	overflow: hidden !important;
	margin: 0 !important;
}

.ocx-how-it-works__image {
	margin: 0 !important;
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	width: 452px !important;
	height: 452px !important;
}

.ocx-how-it-works__image img {
	width: 452px !important;
	height: 452px !important;
	object-fit: contain !important;
	display: block !important;
}

.ocx-how-it-works__text-col {
	width: 685px !important;
	max-width: 685px !important;
	height: 452px !important;
	flex: 0 0 685px !important;
	border-radius: var(--Radius-Medium, 20px) !important;
	background: var(--Color-OpenCX-White, #FCFBF9) !important;
	border: var(--Stroke-Hairline, 0.5px) solid var(--Color-OpenCX-Dune-Light, #CBBB85) !important;
	padding: 48px !important;
	display: flex !important;
	flex-direction: column !important;
	justify-content: space-between !important;
	box-sizing: border-box !important;
	margin: 0 !important;
}

.ocx-how-it-works__paragraphs {
	display: flex !important;
	flex-direction: column !important;
	gap: 24px !important;
}

.ocx-how-it-works__paragraphs p {
	margin: 0 !important;
	font-family: var(--wp--preset--font-family--widescreen, "Widescreen", sans-serif) !important;
	font-size: 18px !important;
	font-weight: 300 !important;
	line-height: 27px !important;
	color: #162227 !important;
	text-align: left !important;
}

.ocx-how-it-works__actions {
	display: flex !important;
	flex-direction: row !important;
	align-items: center !important;
	gap: 24px !important;
}

.ocx-link-dune {
	display: inline-flex !important;
	align-items: center !important;
	gap: 8px !important;
	font-family: var(--wp--preset--font-family--widescreen, "Widescreen", sans-serif) !important;
	font-size: 18px !important;
	font-weight: 400 !important;
	line-height: 27px !important;
	color: var(--Color-OpenCX-Dune, #B69E52) !important;
	text-decoration: none !important;
	transition: opacity 0.2s ease !important;
}

.ocx-link-dune:hover {
	opacity: 0.8 !important;
}

.ocx-link-dune__chevron {
	width: 7px !important;
	height: 13px !important;
	display: block !important;
}

@media (max-width: 1199.98px) {
	.ocx-how-it-works {
		padding: 0 10px !important;
	}

	.ocx-how-it-works__outer {
		width: 100% !important;
		max-width: 100% !important;
		margin: 0 auto !important;
		height: auto !important;
		min-height: auto !important;
	}

	.ocx-how-it-works__card {
		padding: 40px 20px !important;
		height: auto !important;
		gap: 32px !important;
	}

	.ocx-how-it-works__heading {
		font-size: 32px !important;
		line-height: 38px !important;
	}

	.ocx-how-it-works__body {
		flex-direction: column !important;
		padding: 0 !important;
		gap: 24px !important;
	}

	.ocx-how-it-works__media-col,
	.ocx-how-it-works__text-col {
		width: 100% !important;
		height: auto !important;
		padding: 24px !important;
	}

	.ocx-how-it-works__image img {
		width: 100% !important;
		height: auto !important;
		max-width: 350px !important;
	}
}

/*
 * Figma "Layout / 210 /" (#10218:68751), quinta seccion de la home.
 *
 * El frame ya es `padding 112px 64px` + fondo blanco, o sea exactamente lo que
 * hace `.ocx-section--large` sobre `.ocx-section`, asi que la seccion reusa las
 * dos clases y no repite el padding en CSS.
 *
 * "Component" es una FILA: la imagen a la izquierda, el contenido a la derecha,
 * separadas por 80px y con `align-items:center`, o sea que la columna de texto
 * se centra verticalmente contra la imagen en vez de pegarse al tope.
 *
 * La imagen es `sizing.horizontal:fill` con alto FIJO de 640, o sea que es la
 * que define el ancho de la mitad izquierda. Core no tiene "fill" para una
 * imagen, asi que la fila reparte con `flex:1 1 0` en las dos mitades: la
 * imagen y el texto miden lo mismo. Con el 1440 de Figma eso da
 * (1312 - 80) / 2 = 616 para cada una, que es el ancho real del PNG (616x640).
 * O sea que el 616 sale del diseno, no de haberlo medido del archivo.
 *
 * La imagen necesita `align-self:stretch` aparte porque es una `<figure>` dentro
 * de un group, y el `align-items:center` de la fila la dejaria con su alto
 * natural en el centro en vez de emparejarla con la columna de texto.
 */
.ocx-l210__section {
	/* La fila, no la seccion: el group de Figma es alignSelf:stretch. */
	align-items: stretch;
}

.ocx-l210__component {
	flex-direction: row;
	align-items: center;
	gap: 80px;
	width: 100%;
	min-width: 0;
}

/*
 * `flex:1 1 0` en las dos mitades, con basis 0 para que queden iguales
 * sea cual sea la copy. `min-width:0` porque el default `auto` ancla el piso en el
 * min-content y una palabra larga en el parrafo empujaria la fila.
 */
.ocx-l210__media {
	flex: 1 1 0;
	min-width: 0;
	align-items: stretch;
}

.ocx-l210__content {
	flex: 1 1 0;
	min-width: 0;
}

/*
 * El `figure` de core trae su propio margin-bottom, que con la imagen alineada
 * al centro de la fila la desalinea del alto de la columna de texto. Ademas el
 * `border-radius` va en el `img` y no en el `figure`, porque el radio del frame
 * de Figma es de la imagen.
 *
 * `align-items:stretch` es necesario para que el `figure` ocupe el ancho de la
 * mitad. El group de Figma es `alignItems:stretch` pero core le emite
 * `align-items:flex-start` a un group vertical, y con eso el `figure` se
 * encoge a su max-content: a 1920 media daba 856 y la imagen 616, clavada en su
 * ancho natural en vez de llenar.
 *
 * La imagen tiene alto FIJO de 640, que es lo que dice el nodo
 * (`sizing.vertical:fixed, dimensions.height:640`). Con `height:100%` habia un
 * ciclo de resolucion -- img -> figure -> media -> alto de la fila -> img -- que
 * Chrome cerraba en favor del alto del texto: a 1200 la fila daba 585 en vez de
 * 640 y la imagen dejaba de aportar su alto. Con 640px definido la fila toma
 * max(640, alto del texto), que es lo que hace Figma, y a 1440 da exacto 640
 * porque el texto mide 441.78.
 */
.ocx-l210__image {
	margin: 0;
	align-self: stretch;
	width: 100%;
}

.ocx-l210__image img {
	width: 100%;
	height: 640px;
	object-fit: cover;
	border-radius: 16px;
	display: block;
}

/*
 * Los tres parrafos del Figma (#10218:68762) vienen en un solo text node con
 * saltos de doble linea. Se partieron en tres `core/paragraph` para que cada uno
 * sea editable por separado desde el editor, que es el requisito del theme. La
 * escala es la misma: Manrope 400, --Text-Sizes-Text-Medium, 150% de line height.
 */
.ocx-l210__title-content .wp-block-heading {
	margin: 0;
	font-family: var(--wp--preset--font-family--widescreen);
	font-size: var(--Text-Sizes-Heading-2, 52px);
	font-weight: 500;
	line-height: 1.2;
	letter-spacing: -0.01em;
	color: var(--Color-Scheme-1-Text, #000);
}

.ocx-l210__title-content p {
	margin: 0;
	font-family: var(--wp--preset--font-family--widescreen);
	font-size: var(--Text-Sizes-Text-Medium, 18px);
	font-weight: 400;
	line-height: 1.5;
	color: var(--Color-Scheme-1-Text, #000);
}

/*
 * Figma "Style=Link, Small=False, Alternate=False, Icon position=Trailing"
 * (#4179:8937): un control que NO es un boton relleno. Sin fondo, sin borde,
 * texto Manrope 500 de 16px en #B69E52 y un chevron_right de 24px con 8px de
 * gap. El `gap` lo provee el propio bloque (que es flex), no hace falta
 * declararlo, pero el `display:flex` si, porque el markup mete el `<img>` como
 * hijo del `<a>` y sin esto el chevron caeria en su propia linea.
 *
 * El hover quita el subrayado que core pone en `.wp-block-button__link`, igual
 * que en `.ocx-btn--invert`: es un link de navegacion, no un control de formulario.
 */
.wp-block-button.ocx-btn--link .wp-block-button__link {
	display: flex;
	align-items: center;
	gap: 8px;
	background: none;
	border: 0;
	padding: 0;
	color: #b69e52;
	font-family: var(--wp--preset--font-family--widescreen);
	font-size: var(--Text-Sizes-Text-Regular, 16px);
	font-weight: 500;
	line-height: 1.5;
	text-decoration: none;
}

.wp-block-button.ocx-btn--link .wp-block-button__link:hover {
	text-decoration: none;
}

.ocx-btn--link .ocx-btn__icon {
	width: 24px;
	height: 24px;
	flex: 0 0 auto;
}

/*
 * Mobile de "Layout / 210 /".
 *
 * Figma no define variante mobile para este frame (es una instancia de la home,
 * no un component set con variantes, asi que no hay ni desktop ni mobile que
 * consultar). La seccion ya resuelve su padding sola por tokens
 * (112 -> 64 y 64 -> 20), asi que lo unico que hay que decidir es el apilado de
 * la fila.
 *
 * El corte va en 1200 y no en el 600 de "Layout / 71 /" porque alli el problema
 * era que la palabra "business." del titular no entra en una columna de 135px.
 * Aca no hay tal caso: el H2 es corto y la imagen es una foto, asi que con
 * partirlo en 600 la mitad de las tablets queda con la imagen a la mitad de ancho
 * al lado de un bloque de texto estrecho, que no es ni una cosa ni la otra.
 *
 * A diferencia de `.ocx-l71`, el `flex` de las dos mitades hay que revertirlo
 * tambien, por la misma razon: en columna el basis 0 pasaria a ser la altura.
 */
@media (max-width: 1199.98px) {
	.ocx-l210__component {
		flex-direction: column;
		align-items: stretch;
		gap: 40px;
	}

	.ocx-l210__media {
		flex: 0 1 auto;
		align-self: auto;
		width: 100%;
	}

	/*
	 * El 640px fijo es el alto del frame de 1440. Apilada, la imagen tiene que
	 * acompanar el ancho disponible y mantener su proporcion (616/640), asi
	 * que el alto sale del `aspect-ratio` y no de un literal.
	 *
	 * El `align-self:stretch` del figure hay que revertirlo: en la columna
	 * `media` pasa a ser el alto del eje transversal, y estira el figure al
	 * alto de la media en vez de al de la imagen. Medido a 768 daba 728x756.36
	 * con la caja de 640 sin corresponder a la proporcion 616/640.
	 */
	.ocx-l210__image {
		align-self: auto;
	}

	.ocx-l210__image img {
		height: auto;
		aspect-ratio: 616 / 640;
	}
}

/*
 * The prompt field and the Industry control.
 *
 * Both used to carry their colours, fonts and padding as inline styles on the
 * block markup, which outrank any stylesheet, so theme.json and the design
 * tokens could not reach them. Only the absolute offsets stay inline, because
 * the block sets `position` itself and the responsive reset needs !important to
 * undo it. Everything else moved here.
 */

/*
 * Figma "Text/Medium/Normal": Manrope 400 at 18px with a 150% line height, which
 * is the 27px the spec annotates. 18px is --Text-Sizes-Text-Medium.
 */
.ocx-hero__industry-picker {
	position: relative !important;
	display: inline-flex !important;
	align-items: center !important;
}

.ocx-hero__industry .wp-block-button__link {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 7px;
	box-sizing: border-box;
	background: var(--Color-OpenCX-Dune-Lighter, #F0EBDC);
	color: var(--Color-OpenCX-Dune, #B69E52);
	border: 1px solid rgba(203, 187, 133, 0.4);
	border-radius: 9999px;
	padding: 7px 14px;
	min-height: 33px;
	font-family: var(--wp--preset--font-family--widescreen, "Widescreen", sans-serif);
	font-size: 12.5px;
	font-style: normal;
	font-weight: 500;
	line-height: 1;
	text-decoration: none;
	cursor: pointer;
	transition: all 0.22s cubic-bezier(0.16, 1, 0.3, 1);
	user-select: none;
	-webkit-user-select: none;
}

.ocx-hero__industry .wp-block-button__link:hover {
	background: #E8E1CF;
	border-color: var(--Color-OpenCX-Dune, #B69E52);
	transform: translateY(-1px);
	box-shadow: 0 4px 10px rgba(182, 158, 82, 0.18);
}

.ocx-hero__industry .wp-block-button__link:focus-visible {
	outline: 2px solid var(--Color-OpenCX-Dune, #B69E52);
	outline-offset: 2px;
}

/* Active Selected Capsule State */
.ocx-hero__industry .wp-block-button__link.has-selection {
	background: #FAF8F4 !important;
	color: #1B2428 !important;
	border: 1px solid var(--Color-OpenCX-Dune, #B69E52) !important;
	border-radius: 9999px !important;
	padding: 6px 12px 6px 12px !important;
	min-height: 33px !important;
	font-size: 12.5px !important;
	gap: 7px !important;
	box-shadow: 0 2px 10px rgba(182, 158, 82, 0.15) !important;
}

.ocx-hero__industry-icon-slot {
	display: none;
	align-items: center;
	justify-content: center;
	width: 18px;
	height: 18px;
	flex-shrink: 0;
}

.ocx-hero__industry .wp-block-button__link.has-selection .ocx-hero__industry-icon-slot {
	display: inline-flex;
}

.ocx-hero__industry-icon-slot img {
	width: 18px;
	height: 18px;
	display: block;
	object-fit: contain;
}

.ocx-hero__industry .wp-block-button__link.has-selection .ocx-hero__plus-icon {
	display: none !important;
}

/* Clear Selection Button (×) */
.ocx-hero__industry-clear {
	display: none;
	align-items: center;
	justify-content: center;
	width: 18px;
	height: 18px;
	margin-left: 2px;
	border-radius: 50%;
	background: rgba(182, 158, 82, 0.18);
	color: #604E1D;
	font-size: 14px;
	line-height: 1;
	font-weight: 600;
	cursor: pointer;
	transition: all 0.18s ease;
}

.ocx-hero__industry .wp-block-button__link.has-selection .ocx-hero__industry-clear {
	display: inline-flex;
}

.ocx-hero__industry-clear:hover {
	background: #B69E52;
	color: #FFFFFF;
	transform: scale(1.1);
}

/* Floating Industry Popover Card (Option 1) */
.ocx-hero__industry-popover {
	position: absolute;
	left: 0;
	top: calc(100% + 10px);
	width: 395px;
	max-width: calc(100vw - 32px);
	background: #FFFFFF;
	border: 1px solid var(--Color-OpenCX-Dune-Lighter, #F0EBDC);
	border-radius: 16px;
	padding: 14px 16px 16px 16px;
	box-shadow: 0 16px 40px -6px rgba(27, 36, 40, 0.14), 0 4px 16px rgba(27, 36, 40, 0.06);
	z-index: 200;
	opacity: 0;
	visibility: hidden;
	transform: translateY(-8px) scale(0.97);
	pointer-events: none;
	transition: opacity 0.22s cubic-bezier(0.16, 1, 0.3, 1),
	            transform 0.22s cubic-bezier(0.16, 1, 0.3, 1),
	            visibility 0.22s;
	box-sizing: border-box;
}

.ocx-hero__industry-popover.is-open {
	opacity: 1;
	visibility: visible;
	transform: translateY(0) scale(1);
	pointer-events: auto;
}

/* Header inside Popover */
.ocx-hero__industry-popover-header {
	display: flex;
	flex-direction: column;
	gap: 2px;
	margin-bottom: 12px;
	padding-bottom: 8px;
	border-bottom: 1px solid #F5F1E8;
}

.ocx-hero__industry-popover-title {
	font-family: var(--wp--preset--font-family--widescreen, "Widescreen", sans-serif);
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--Color-OpenCX-Dune, #B69E52);
}

.ocx-hero__industry-popover-hint {
	font-family: var(--wp--preset--font-family--manrope, "Manrope", sans-serif);
	font-size: 12px;
	color: #6C7A82;
	line-height: 1.35;
}

/* Capsules Flex Container */
.ocx-hero__industry-chips {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

/* Individual Capsule Pill */
.ocx-hero__industry-chip {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	padding: 7px 12px;
	background: #FAF8F4;
	border: 1px solid rgba(203, 187, 133, 0.35);
	border-radius: 9999px; /* Modern capsule shape */
	font-family: var(--wp--preset--font-family--widescreen, "Widescreen", sans-serif);
	font-size: 12.5px;
	font-weight: 500;
	color: #1B2428;
	cursor: pointer;
	box-sizing: border-box;
	white-space: nowrap;
	transition: all 0.18s cubic-bezier(0.16, 1, 0.3, 1);
	outline: none;
}

.ocx-hero__industry-chip:hover {
	background: #F0EBDC;
	border-color: var(--Color-OpenCX-Dune, #B69E52);
	transform: translateY(-1px);
	box-shadow: 0 4px 10px rgba(182, 158, 82, 0.18);
}

.ocx-hero__industry-chip:active {
	transform: translateY(0);
}

.ocx-hero__industry-chip:focus-visible {
	border-color: var(--Color-OpenCX-Dune, #B69E52);
	box-shadow: 0 0 0 2px rgba(182, 158, 82, 0.3);
}

.ocx-hero__industry-chip.is-selected {
	background: #1B2428;
	color: #FAF8F4;
	border-color: #1B2428;
	box-shadow: 0 4px 12px rgba(27, 36, 40, 0.2);
}

.ocx-hero__industry-chip.is-selected .ocx-hero__chip-text {
	color: #FAF8F4;
}

.ocx-hero__chip-icon {
	width: 17px;
	height: 17px;
	flex-shrink: 0;
	display: block;
	object-fit: contain;
}

.ocx-hero__chip-text {
	line-height: 1;
}

/* Prompt Field Cross-fade */
.ocx-hero__field {
	transition: opacity 0.18s cubic-bezier(0.16, 1, 0.3, 1), transform 0.18s cubic-bezier(0.16, 1, 0.3, 1);
}

.ocx-hero__field.is-changing {
	opacity: 0;
	transform: translateY(-3px);
}

.ocx-hero__industry .ocx-hero__caret {
	font-family: var(--wp--preset--font-family--widescreen);
	font-size: 10px;
	font-style: normal;
	font-weight: 400;
	line-height: 155%;
	color: var(--Color-OpenCX-Dune, #B69E52);
}

.ocx-hero__industry .ocx-hero__plus-icon {
	display: inline-block;
	width: 14px;
	height: 14px;
	vertical-align: middle;
}

/*
 * The dropdown panel.
 *
 * This is the box spec, applied to the navigation submenu container rather than
 * to a hand-built element, so that any submenu added in the WP menu picks up the
 * design with no code change: the Industries submenu and any future one are the
 * same rule.
 *
 * The offsets are deliberately NOT here. The spec carries
 * `right:-12px; bottom:-160px`, which places the panel relative to the hero's
 * Industry control. A navigation item sits at y=80 in a 160px header, so the
 * same offsets would push the panel's bottom edge to y=240 and drag its top off
 * screen. Core's own placement (top:27px, left:-1px, i.e. under the parent
 * item) is kept. The hero's control does not open a panel yet; if it ever does,
 * those offsets belong on a rule of their own, anchored to a content-sized
 * wrapper around the control rather than to the form.
 *
 * `--Stroke-Border-Width` is 0px, so `border: 0 solid` is the spec taken
 * literally rather than a missing style: the panel has no visible border. Core
 * ships a 1px rgba(0,0,0,0.15) border, which this deliberately removes.
 *
 * The selector is deliberately long. Core reaches the same element with
 * `.wp-block-navigation .has-child .wp-block-navigation__submenu-container`
 * (0,3,0) for align-items and
 * `.wp-block-navigation:not(.has-background) .wp-block-navigation__submenu-container`
 * (0,3,1) for the background and the border, and it loads first. A plain
 * `.ocx-nav--menu .wp-block-navigation__submenu-container` (0,2,0) loses both
 * and silently keeps core's `align-items:normal` and its 1px border, so the
 * prefix below is what makes this rule win.
 */
.wp-block-navigation.ocx-nav--menu .has-child .wp-block-navigation__submenu-container,
.wp-block-navigation.ocx-nav--menu .wp-block-navigation__submenu-container {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 16px;
	box-sizing: border-box;
	padding: 24px;
	background: var(--Color-Scheme-1-Background, #fff);
	border: var(--Stroke-Border-Width, 0) solid var(--Color-Scheme-1-Border, rgba(0, 0, 0, 0.15));
	border-radius: var(--Radius-Small, 16px);
}

/*
 * Core pads the links themselves (9px 18px). Keeping that plus the panel's 24px
 * would put the labels at a 42px inset and make the 16px gap read as 34px, so
 * the spacing is moved entirely onto the box and the links go to zero. The row
 * height is then the 24px line box, which is what the 16px gap is spacing.
 *
 * align-items:flex-start above is what lets each row hug its label instead of
 * being stretched to the widest one, so the panel is only as wide as it needs.
 *
 * The selector mirrors core's own
 * `.wp-block-navigation .has-child .wp-block-navigation__submenu-container >
 * .wp-block-navigation-item > .wp-block-navigation-item__content` (0,5,1) with
 * one extra class, because that is the rule that has to lose. A shorter selector
 * such as `.ocx-nav--menu .wp-block-navigation__submenu-container
 * .wp-block-navigation-item__content` is (0,3,0) and core's 0.5em 1em padding
 * wins, leaving the labels at a 42px inset.
 */
.wp-block-navigation.ocx-nav--menu .has-child .wp-block-navigation__submenu-container > .wp-block-navigation-item > .wp-block-navigation-item__content {
	padding: 0;
}

/*
 * Hero prompt field (Figma 12287:67727 / I12287:67728;4179:9028)
 *
 * 500px content width with 25px padding, wrapping cleanly into 2 lines.
 * Clean white prompt card matching Figma 10218:66905 (flat, borderless inside, no beam animation).
 */
.ocx-hero__field {
	display: inline-flex;
	height: 85px;
	padding: 25px;
	align-items: center;
	gap: 12px;
	border: 1px solid var(--Opacity-Transparent, rgba(255, 255, 255, 0.00));
	box-sizing: border-box;
	max-width: 550px;
	margin: 0;
	font-family: var(--wp--preset--font-family--widescreen, "Widescreen", sans-serif);
	font-size: 18px;
	font-style: normal;
	font-weight: 300;
	line-height: 27px;
	color: #426676;
}

.ocx-hero__form::after {
	display: none;
}

/*
 * Figma "Layout / 121 /" (#10218:70451), sexta seccion de la home.
 *
 * El frame es `padding 112px 64px` + fondo blanco, igual que "Layout / 210 /", asi
 * que reusa `.ocx-section--large` sobre `.ocx-section` en vez de repetir el padding.
 * Noveno frame con el mismo `padding 112px 64px`: la serie de secciones "large" de
 * la home es practicamente identica en su marco y solo cambia el interior.
 *
 * "Component" es una fila con dos columnas `fill` y 80px de gap: la de texto
 * (Column) y el timeline. Igual que en "Layout / 71 /", core no tiene "fill" para un
 * group, asi que `flex:1 1 0` es lo que reparte el ancho. A 1440 eso da
 * (1312 - 80) / 2 = 616 para cada una.
 *
 * El `flex:1 1 0` tiene que estar en las DOS mitades, no solo en la del texto. Con
 * el timeline en `flex:0 1 auto` y su `min-width:auto` default, crecia hasta el
 * min-content de su item mas largo (1173.84px) y la columna de texto se quedaba
 * con 58.16px: el H2,title de 52px partido en un caracter por linea y el boton
 * colgando. El `min-width:0` hace lo mismo que en las otras columnas del theme:
 * deja que sea el flex el que reparta en vez del min-content.
 *
 * El timeline son 12 items: 5 de encabezado de grupo y 7 de contenido. Cada item es
 * una fila con el icono a la izquierda y el texto a la derecha.
 */
/*
 * Section: Why OpenCX (Figma 10218:70451 / 10218:66034)
 */
.ocx-why {
	width: 100%;
	padding: 0 80px;
	background-color: var(--Color-OpenCX-Dune-Lightest, #F8F6F0);
	display: flex;
	justify-content: center;
	align-items: center;
	box-sizing: border-box;
}

.ocx-why__outer {
	position: relative;
	display: flex !important;
	width: 1280px !important;
	max-width: var(--Container-container-large, 1280px) !important;
	min-height: 1081px !important;
	height: auto !important;
	flex-direction: column !important;
	flex-wrap: nowrap !important;
	justify-content: center !important;
	align-items: center !important;
	margin-inline: auto !important;
	border: var(--Stroke-Hairline, 0.5px) solid var(--Color-OpenCX-Dune-Light, #CBBB85) !important;
	background: var(--Color-OpenCX-Dune-Lighter, #F0EBDC) !important;
	box-sizing: border-box !important;
}

.ocx-why__card {
	position: relative;
	display: flex !important;
	flex-direction: row !important;
	flex-wrap: nowrap !important;
	align-items: stretch !important;
	width: calc(100% + (2 * var(--Stroke-Hairline, 0.5px))) !important;
	min-height: 1081px !important;
	height: auto !important;
	margin: calc(-1 * var(--Stroke-Hairline, 0.5px)) !important;
	border-radius: var(--Radius-Medium, 20px) !important;
	border: var(--Stroke-Hairline, 0.5px) solid var(--Color-OpenCX-Dune-Light, #CBBB85) !important;
	background: #00C9C9 !important;
	box-sizing: border-box !important;
	overflow: hidden !important;
}

.ocx-why__col-left {
	position: relative !important;
	width: 500px !important;
	flex: 0 0 500px !important;
	display: flex !important;
	flex-direction: column !important;
	justify-content: space-between !important;
	padding: 80px 48px !important;
	box-sizing: border-box !important;
	overflow: hidden !important;
}

.ocx-why__content {
	display: flex !important;
	flex-direction: column !important;
	gap: 16px !important;
	position: relative !important;
	z-index: 2 !important;
}

.ocx-why__tagline {
	display: inline-flex !important;
	flex-direction: row !important;
	align-items: center !important;
	gap: 8px !important;
}

.ocx-why__bracket {
	width: 24px !important;
	height: 24px !important;
	display: block !important;
}

.ocx-why__tagline-text {
	font-family: var(--wp--preset--font-family--widescreen, "Widescreen", sans-serif) !important;
	font-size: 22px !important;
	font-weight: 400 !important;
	line-height: 33px !important;
	color: #162227 !important;
}

.ocx-why__heading {
	margin: 0 !important;
	font-family: var(--wp--preset--font-family--widescreen, "Widescreen", sans-serif) !important;
	font-size: 55px !important;
	font-weight: 400 !important;
	line-height: 1 !important;
	letter-spacing: -0.55px !important;
	color: #162227 !important;
	text-align: left !important;
}

.ocx-why__heading-accent {
	font-family: var(--wp--preset--font-family--widescreen-ex, "widescreen-ex", sans-serif) !important;
	color: #FCFBF9 !important;
	letter-spacing: -1.65px !important;
}

.ocx-why__actions {
	margin-top: 16px !important;
	display: flex !important;
	align-items: center !important;
}

.ocx-why__action-link {
	display: inline-flex !important;
	align-items: center !important;
	gap: 8px !important;
	font-family: var(--wp--preset--font-family--widescreen, "Widescreen", sans-serif) !important;
	font-size: 18px !important;
	font-weight: 400 !important;
	line-height: 27px !important;
	color: #162227 !important;
	text-decoration: none !important;
	transition: opacity 0.2s ease !important;
}

.ocx-why__action-link:hover {
	opacity: 0.75 !important;
}

.ocx-why__action-chevron {
	width: 7px !important;
	height: 13px !important;
	display: block !important;
}

.ocx-why__texture {
	position: absolute !important;
	bottom: 0 !important;
	left: 0 !important;
	width: 600px !important;
	height: 400px !important;
	pointer-events: none !important;
	z-index: 1 !important;
}

/* Right timeline card */
.ocx-why__timeline-card {
	flex: 1 1 0 !important;
	background: #1C495A !important;
	border-radius: 20px !important;
	padding: 80px !important;
	display: flex !important;
	flex-direction: column !important;
	gap: 40px !important;
	box-sizing: border-box !important;
	position: relative !important;
	z-index: 2 !important;
}

.ocx-why__group {
	display: flex !important;
	flex-direction: column !important;
	gap: 32px !important;
}

.ocx-why__group-title {
	margin: 0 !important;
	font-family: var(--wp--preset--font-family--widescreen, "Widescreen", sans-serif) !important;
	font-size: 28px !important;
	font-weight: 600 !important;
	line-height: 1.4 !important;
	letter-spacing: -0.28px !important;
	color: #00C9C9 !important;
	text-align: left !important;
}

.ocx-why__timeline-list {
	display: flex !important;
	flex-direction: column !important;
	gap: 0 !important;
}

.ocx-why__item {
	display: flex !important;
	flex-direction: row !important;
	align-items: stretch !important;
	gap: 10px !important;
	cursor: pointer !important;
	user-select: none !important;
}

.ocx-why__marker {
	display: flex !important;
	flex-direction: column !important;
	align-items: center !important;
	width: 24px !important;
	flex-shrink: 0 !important;
}

.ocx-why__marker-icon {
	width: 24px !important;
	height: 24px !important;
	display: block !important;
	flex-shrink: 0 !important;
	margin-top: 5px !important;
	transition: opacity 0.2s ease !important;
}

.ocx-why__marker-line {
	display: none !important;
}

.ocx-why__body {
	display: flex !important;
	flex-direction: column !important;
	gap: 16px !important;
	border-left: 1px solid #607F8B !important;
	padding-left: 30px !important;
	padding-bottom: 20px !important;
	flex: 1 1 auto !important;
}

.ocx-why__item--last-in-group .ocx-why__body,
.ocx-why__item--last .ocx-why__body {
	padding-bottom: 0 !important;
}

.ocx-why__item-title {
	margin: 0 !important;
	font-family: var(--wp--preset--font-family--widescreen, "Widescreen", sans-serif) !important;
	font-size: 24px !important;
	font-weight: 300 !important;
	line-height: 1.4 !important;
	color: #FCFBF9 !important;
	text-align: left !important;
	transition: color 0.2s ease !important;
}

.ocx-why__item:hover .ocx-why__item-title {
	color: #00C9C9 !important;
}

.ocx-why__item.is-active .ocx-why__item-title {
	color: #FCFBF9 !important;
}

.ocx-why__item-desc {
	margin: 0 !important;
	font-family: var(--wp--preset--font-family--widescreen, "Widescreen", sans-serif) !important;
	font-size: 16px !important;
	font-weight: 400 !important;
	line-height: 1.5 !important;
	color: #FCFBF9 !important;
	opacity: 0.9 !important;
	text-align: left !important;
}

/* Accordion toggling */
.ocx-why__item .ocx-why__marker-icon--minus {
	display: none !important;
}
.ocx-why__item .ocx-why__marker-icon--plus {
	display: block !important;
}
.ocx-why__item .ocx-why__item-desc {
	display: none !important;
}

.ocx-why__item.is-active .ocx-why__marker-icon--minus {
	display: block !important;
}
.ocx-why__item.is-active .ocx-why__marker-icon--plus {
	display: none !important;
}
.ocx-why__item.is-active .ocx-why__item-desc {
	display: block !important;
}
.ocx-why__item.is-active .ocx-why__body {
	padding-bottom: 24px !important;
}
.ocx-why__item.is-active.ocx-why__item--last-in-group .ocx-why__body,
.ocx-why__item.is-active.ocx-why__item--last .ocx-why__body {
	padding-bottom: 0 !important;
}

@media (max-width: 1199.98px) {
	.ocx-why {
		padding: 0 10px !important;
	}

	.ocx-why__outer {
		width: 100% !important;
		max-width: 100% !important;
		margin: 0 auto !important;
		min-height: auto !important;
	}

	.ocx-why__card {
		flex-direction: column !important;
		min-height: auto !important;
	}

	.ocx-why__col-left {
		width: 100% !important;
		flex: none !important;
		padding: 40px 24px !important;
	}

	.ocx-why__heading {
		font-size: 36px !important;
	}

	.ocx-why__timeline-card {
		padding: 40px 24px !important;
		border-radius: 20px !important;
	}

	.ocx-why__texture {
		display: none !important;
	}
}

/*
 * Figma "Layout / 59 /" (#10218:70868), septima seccion de la home, antes del footer.
 *
 * Mismo marco que "Layout / 210 /" y "Layout / 121 /": `padding 112px 64px` (tokens,
 * 64/20 en mobile) y fondo blanco, asi que reusa `.ocx-section--large` sobre
 * `.ocx-section` en vez de repetir el padding.
 *
 * El nodo de Figma trae `alignItems:stretch` en el frame; el layout indicado decia
 * `align-items:center`. Gana Figma, pero en este caso es indistinto: el unico hijo del
 * frame es "Container", que trae `alignSelf:stretch`, y el `align-self` del hijo pisa
 * al `align-items` del padre. Con cualquiera de los dos el Container mide el ancho
 * completo, asi que no hay diferencia de render y queda el del archivo.
 *
 * Estructura: Container > Component (fila de 80px) > dos columnas `fill`.
 */
/*
 * Section: Call to Action / Roadmap (Figma 12336:31664)
 */
.ocx-cta-roadmap {
	width: 100% !important;
	padding: 0 80px !important;
	background-color: var(--Color-OpenCX-Dune-Lightest, #F8F6F0) !important;
	display: flex !important;
	justify-content: center !important;
	align-items: center !important;
	box-sizing: border-box !important;
}

.ocx-cta-roadmap__outer {
	position: relative !important;
	display: flex !important;
	width: 1280px !important;
	height: 437px !important;
	min-height: 437px !important;
	max-width: var(--Container-container-large, 1280px) !important;
	justify-content: center !important;
	align-items: center !important;
	margin-inline: auto !important;
	border: var(--Stroke-Hairline, 0.5px) solid #00C9C9 !important;
	background: var(--Color-OpenCX-White, #FCFBF9) !important;
	box-sizing: border-box !important;
}

.ocx-cta-roadmap__component {
	display: flex !important;
	flex-direction: row !important;
	justify-content: center !important;
	align-items: stretch !important;
	width: 1080px !important;
	height: 437px !important;
	flex-wrap: nowrap !important;
	box-sizing: border-box !important;
}

.ocx-cta-roadmap__col--title {
	display: flex !important;
	flex-direction: column !important;
	flex-wrap: nowrap !important;
	justify-content: flex-start !important;
	width: 461px !important;
	min-width: 461px !important;
	max-width: 461px !important;
	flex: 0 0 461px !important;
	height: 437px !important;
	padding: 48px !important;
	border-radius: var(--Radius-Medium, 20px) !important;
	background: var(--Color-OpenCX-Dune-Lightest, #F8F6F0) !important;
	border: var(--Stroke-Hairline, 0.5px) solid var(--Color-OpenCX-Dune-Light, #CBBB85) !important;
	gap: 10px !important;
	box-sizing: border-box !important;
}

.ocx-cta-roadmap__tagline {
	margin: 0 !important;
	font-family: var(--wp--preset--font-family--widescreen, "Widescreen", sans-serif) !important;
	font-size: 22px !important;
	font-weight: 400 !important;
	line-height: 33px !important;
	color: #162227 !important;
	letter-spacing: normal !important;
}

.ocx-cta-roadmap__dash {
	color: #8F459C !important;
}

.ocx-cta-roadmap__heading,
.ocx-cta-roadmap__col--title .wp-block-heading {
	margin: 0 !important;
	font-family: var(--wp--preset--font-family--widescreen, "Widescreen", sans-serif) !important;
	font-size: 44px !important;
	font-weight: 400 !important;
	line-height: 52.8px !important;
	letter-spacing: -0.44px !important;
	color: var(--Color-OpenCX-Dune, #B69E52) !important;
	text-align: left !important;
}

.ocx-cta-roadmap__col--text {
	display: flex !important;
	flex-direction: column !important;
	flex-wrap: nowrap !important;
	justify-content: space-between !important;
	width: 619px !important;
	min-width: 619px !important;
	max-width: 619px !important;
	flex: 0 0 619px !important;
	height: 437px !important;
	padding: 48px !important;
	margin-left: -1px !important;
	border-radius: var(--Radius-Medium, 20px) !important;
	background: var(--Color-OpenCX-Dune-Lightest, #F8F6F0) !important;
	border: var(--Stroke-Hairline, 0.5px) solid var(--Color-OpenCX-Dune-Light, #CBBB85) !important;
	box-sizing: border-box !important;
}

.ocx-cta-roadmap__text-content {
	display: flex !important;
	flex-direction: column !important;
	gap: 16px !important;
}

.ocx-cta-roadmap__desc {
	margin: 0 !important;
	font-family: var(--wp--preset--font-family--widescreen, "Widescreen", sans-serif) !important;
	font-size: 18px !important;
	font-weight: 300 !important;
	line-height: 27px !important;
	color: #162227 !important;
	text-align: left !important;
}

.ocx-cta-roadmap__desc--bold strong {
	font-weight: 600 !important;
}

.ocx-cta-roadmap__actions {
	display: flex !important;
	flex-direction: row !important;
	align-items: center !important;
	gap: 24px !important;
	margin-top: auto !important;
}

@media (max-width: 1199.98px) {
	.ocx-cta-roadmap {
		padding: 0 10px !important;
	}

	.ocx-cta-roadmap__outer {
		width: 100% !important;
		max-width: 100% !important;
		margin: 0 auto !important;
		height: auto !important;
		min-height: auto !important;
		border: none !important;
	}

	.ocx-cta-roadmap__component {
		flex-direction: column !important;
		width: 100% !important;
		height: auto !important;
	}

	.ocx-cta-roadmap__col--title,
	.ocx-cta-roadmap__col--text {
		width: 100% !important;
		min-width: 0 !important;
		max-width: 100% !important;
		flex: 1 1 auto !important;
		height: auto !important;
		padding: 32px 24px !important;
		margin-left: 0 !important;
	}

	.ocx-cta-roadmap__heading,
	.ocx-cta-roadmap__col--title .wp-block-heading {
		font-size: 32px !important;
		line-height: 38px !important;
	}

	.ocx-cta-roadmap__col--text {
		margin-top: -1px !important;
		gap: 24px !important;
	}
}

.ocx-l59__container {
	width: 100%;
	min-width: 0;
}

.ocx-l59__component {
	flex-direction: row;
	gap: 80px;
	width: 100%;
	min-width: 0;
}

/*
 * Las dos columnas van `flex:1 1 0` por el mismo motivo que en "Layout / 71 /" y
 * "Layout / 121 /": core no tiene "fill" para un group. A 1440 eso da
 * (1312 - 80) / 2 = 616 para cada una. El `min-width:0` evita que el min-content de
 * la columna de texto (que tiene el H2 de 52px) le robe ancho a la otra.
 */
.ocx-l59__column {
	flex: 1 1 0;
	min-width: 0;
}

.ocx-l59__column--text {
	gap: 16px;
}

/*
 * Figma "Heading/Tagline": Manrope SemiBold 600 a 16px con 150% de line height, dentro
 * de un "Tagline Wrapper" `alignItems:center` de tamano hug. El wrapper no aporta nada
 * visual (un solo text, sin gap) asi que el parrafo va directo; el `align-items` de la
 * columna es lo que lo alinea a la izquierda.
 *
 * El 600 no tiene token de font-weight, asi que es literal, igual que el tagline de
 * "Layout / 121 /".
 */
.ocx-l59__label {
	margin: 0;
	font-family: var(--wp--preset--font-family--widescreen);
	font-size: var(--Text-Sizes-Text-Regular, 16px);
	font-weight: 600;
	line-height: 1.5;
	color: var(--Color-Scheme-1-Text, #000);
}

.ocx-l59__column--text .wp-block-heading {
	margin: 0;
	font-family: var(--wp--preset--font-family--widescreen);
	font-size: var(--Text-Sizes-Heading-2, 52px);
	font-weight: 500;
	line-height: 1.2;
	letter-spacing: -0.01em;
	color: var(--Color-Scheme-1-Text, #000);
}

/*
 * La columna de texto arranca 54px mas abajo que la de tagline. No es un error de
 * Figma: es el desfase que hace que el H2 de la izquierda quede alineado con el
 * parrafo de la derecha en vez de arrancar los dos al mismo alto. Por eso el
 * `padding-top` va en la columna y no como margen en el texto.
 *
 * Se pierde al apilar (ver el `@media` de mas abajo).
 */
.ocx-l59__column--body {
	padding-top: 54px;
	gap: 32px;
}

/*
 * "Content" es un group con `gap:32px` que contiene un solo text, asi que el gap no se
 * llega a ver. Se conserva el wrapper para mantener la estructura del nodo, y el gap
 * queda declarado en el markup por si el copy crece con un segundo parrafo.
 */
.ocx-l59__content {
	gap: 32px;
}

/*
 * Figma "Text/Medium/Normal": Manrope Regular 400 a 18px con 150% de line height. El
 * `boldWeight:700` del nodo es el `ts1` ("Bold") del final del texto, o sea un tramo
 * en negrita dentro del mismo text node, no un estilo del parrafo entero. Se hizo con
 * `<strong>` para que siga siendo rich text editable en el Site Editor, en vez de
 * partir el parrafo en dos bloques.
 *
 * El 700 tampoco tiene token de font-weight, asi que es literal.
 */
.ocx-l59__content p {
	margin: 0;
	font-family: var(--wp--preset--font-family--widescreen);
	font-size: var(--Text-Sizes-Text-Medium, 18px);
	font-weight: 400;
	line-height: 1.5;
	color: var(--Color-Scheme-1-Text, #000);
}

.ocx-l59__content strong {
	font-weight: 700;
}

.ocx-l59__actions {
	gap: 24px;
}

/*
 * Mobile de "Layout / 59 /".
 *
 * Igual que "Layout / 210 /" y "Layout / 121 /", Figma no define variante mobile para
 * este frame: es una instancia de la home, no un component set. El padding lo resuelven
 * los tokens y el H2 baja a 36px solo.
 *
 * El corte va en 1200, y al apilar hay que quitar el `padding-top:54px` de la columna
 * de texto: su unico proposito es el desfase contra el H2 de la izquierda, que apilada
 * ya no existe. Dejarla seria 54px de aire muerto arriba de cada bloque.
 *
 * El `flex:1 1 0` de las dos columnas se revierte a `0 1 auto` porque en columna el
 * basis 0 pasaria a ser la altura y las dos se estirarian a la mitad exacta.
 */
@media (max-width: 1199.98px) {
	.ocx-l59__component {
		flex-direction: column;
		align-items: stretch;
		gap: 40px;
	}

	.ocx-l59__column {
		flex: 0 1 auto;
	}

	.ocx-l59__column--body {
		padding-top: 0;
	}
}

/*
 * Figma "Stats / 55 /" (#10218:71520), octava y ultima seccion de la home, antes del
 * footer.
 *
 * Mismo marco que las tres anteriores: `padding 112px 64px` (tokens, 64/20 en mobile) y
 * fondo blanco, asi que reusa `.ocx-section--large` sobre `.ocx-section`.
 *
 * El nodo de Figma trae `alignItems:stretch` en el frame; el layout indicado decia
 * `align-items:center`. Gana Figma, y aqui es indistinto: el unico hijo del frame es
 * "Container", que trae `alignSelf:stretch`, y el `align-self` del hijo pisa al
 * `align-items` del padre. Igual que en "Layout / 59 /".
 */
/* ==========================================================================
 * Business Outcomes (Figma Desktop #10218:71520: w=1440, h=1030, bg=#F8F6F0)
 * ========================================================================== */
.ocx-business-outcomes__section {
	width: 100%;
	background-color: var(--Color-Amber-Light, #F8F6F0);
	padding: 0 80px;
	box-sizing: border-box;
}

.ocx-business-outcomes__container {
	max-width: var(--Container-container-large, 1280px);
	width: 100%;
	margin: 0 auto;
	padding: 80px 0;
	display: flex;
	flex-direction: column;
	gap: 80px;
	box-sizing: border-box;
	border-left: 0.5px solid var(--Color-OpenCX-Dune-Light, #CBBB85);
	border-right: 0.5px solid var(--Color-OpenCX-Dune-Light, #CBBB85);
	background-image: url('../images/pattern-tile.svg');
	background-repeat: repeat;
	background-size: 80px 80px;
}

.ocx-business-outcomes__header {
	display: flex;
	justify-content: center;
	align-items: center;
	width: 100%;
	box-sizing: border-box;
	text-align: center;
}

.ocx-business-outcomes__heading {
	font-family: var(--wp--preset--font-family--widescreen, 'Widescreen', sans-serif);
	font-size: 55px;
	line-height: 1.0;
	letter-spacing: -0.01em;
	font-weight: 400;
	color: #162227;
	max-width: 853px;
	width: 100%;
	margin: 0 auto;
}

.ocx-business-outcomes__heading-accent {
	font-family: var(--wp--preset--font-family--widescreen-ex, "widescreen-ex", sans-serif);
	color: var(--Color-OpenCX-Dune, #B69E52);
	font-size: 50px;
	letter-spacing: -0.03em;
}

.ocx-business-outcomes__stats {
	width: 100%;
	padding: 0 48px;
	box-sizing: border-box;
	display: flex;
	flex-direction: column;
}

.ocx-business-outcomes__row {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	border-top: 0.5px solid #00C9C9;
	border-bottom: 0.5px solid #00C9C9;
	box-sizing: border-box;
	width: 100%;
}

.ocx-business-outcomes__row + .ocx-business-outcomes__row {
	margin-top: -0.5px;
}

.ocx-business-outcomes__card {
	padding: 48px 20px;
	box-sizing: border-box;
	display: flex;
	flex-direction: column;
	justify-content: flex-start;
	min-height: 294px;
	gap: 60px;
	background-color: var(--Color-Amber-Light, #F8F6F0);
	border: none !important;
}

.ocx-business-outcomes__card-top {
	display: flex;
	justify-content: space-between;
	align-items: center;
	height: 50px;
	width: 100%;
}

.ocx-business-outcomes__card-value {
	font-family: var(--wp--preset--font-family--widescreen-ex, "widescreen-ex", sans-serif);
	font-size: 50px;
	line-height: 1.0;
	letter-spacing: -0.01em;
	font-weight: 400;
	color: var(--Color-OpenCX-Dune-Light, #CBBB85);
	margin: 0;
	display: inline-block;
	font-variant-numeric: tabular-nums;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	will-change: contents;
}

.ocx-business-outcomes__card-icon {
	width: 30px;
	height: 30px;
	flex-shrink: 0;
	display: flex;
	align-items: center;
	justify-content: center;
}

.ocx-business-outcomes__card-icon img,
.ocx-business-outcomes__card-icon svg {
	width: 30px;
	height: 30px;
	display: block;
}

.ocx-business-outcomes__card-bottom {
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.ocx-business-outcomes__card-title {
	font-family: var(--wp--preset--font-family--widescreen, 'Widescreen', sans-serif);
	font-size: 16px;
	line-height: 1.5;
	font-weight: 600;
	color: #162227;
	margin: 0;
}

.ocx-business-outcomes__card-desc {
	font-family: var(--wp--preset--font-family--widescreen, 'Widescreen', sans-serif);
	font-size: 14px;
	line-height: 1.3;
	font-weight: 400;
	color: #162227;
	margin: 0;
}

@media (max-width: 1240px) {
	.ocx-business-outcomes__section {
		padding: 0 10px !important;
	}
	.ocx-business-outcomes__container {
		width: 100% !important;
		max-width: 100% !important;
		margin: 0 auto !important;
	}
	.ocx-business-outcomes__stats {
		padding: 0 16px;
	}
	.ocx-business-outcomes__row {
		grid-template-columns: repeat(2, 1fr);
	}
	.ocx-business-outcomes__card {
		padding: 32px 16px;
		min-height: auto;
	}
}

@media (max-width: 768px) {
	.ocx-business-outcomes__heading {
		font-size: 34px;
		line-height: 1.1;
	}
	.ocx-business-outcomes__row {
		grid-template-columns: 1fr;
	}
	.ocx-business-outcomes__card {
		padding: 24px 0;
		border-bottom: 0.5px solid rgba(0, 201, 201, 0.4);
	}
	.ocx-business-outcomes__card:last-child {
		border-bottom: none;
	}
}

.ocx-l55__container {
	width: 100%;
	min-width: 0;
}

.ocx-l55__content {
	flex-direction: row;
	/*
	 * `flex-wrap:nowrap` es obligatorio y no es cosmetico.
	 *
	 * Core pone `flex-wrap:wrap` en `.is-layout-flex`, y con el basis en px de las dos
	 * mitadas (609 + 597 + 32 de gap = 1238) el item se salta de linea en cuanto el
	 * contenedor baja de 1238, o sea entre 1200 y ~1402. A 1200 el H2 y el grid de
	 * stats quedaban en dos lineas distintas, ambos arrancando en x=64 y con 463px de
	 * vacio a la derecha del grid.
	 *
	 * Lo peligroso es que no se detecta mirando `scrollWidth`: no hay desborde, hay un
	 * salto de linea, asi que el chequeo de overflow horizontal daba "no" mientras el
	 * layout estaba roto. Con `nowrap` el `flex-shrink:1` hace lo que debe y las
	 * mitadas bajan proporcionalmente (a 1200 miden 525.14 y 514.86).
	 *
	 * Las otras dos columnas del theme usan `flex:1 1 0`, con basis 0, asi que nunca
	 * llegan a envolver: por eso este problema es exclusivo de esta seccion.
	 */
	flex-wrap: nowrap;
	justify-content: space-between;
	align-items: flex-start;
	gap: 32px;
	width: 100%;
	min-width: 0;
}

.ocx-l55__intro {
	flex: 0 1 609px;
	min-width: 0;
}

.ocx-l55__stats {
	flex: 0 1 597px;
	min-width: 0;
	gap: 32px;
}

.ocx-l55__intro .wp-block-heading {
	margin: 0;
	font-family: var(--wp--preset--font-family--widescreen);
	font-size: var(--Text-Sizes-Heading-2, 52px);
	font-weight: 500;
	line-height: 1.2;
	letter-spacing: -0.01em;
	color: var(--Color-Scheme-1-Text, #000);
}

/*
 * Las 4 filas del grid.
 *
 * `align-items:stretch` es lo que hace que las tarjetas de una misma fila midan lo
 * mismo, la mas alta. Core le pone `align-items:flex-start` a los groups, asi que sin
 * esto cada tarjeta se mide contra su propio texto y las filas quedan escalonadas:
 * medido a 1440, la fila 3 daba 219.98 contra 189.19 y la fila 4 189.19 contra 158.39.
 * Figma lo resuelve con su default MIN (que es stretch) y lo marca explicito como
 * `alignSelf:stretch` en "#10218:72764".
 *
 * Por eso los `sizing.vertical:fill` de "#10218:72767" y el
 * `dimensions.height:188` de "#10310:911" no llevan altura fija en las demas tarjetas:
 * con el stretch de la fila se resuelven solas y ninguna queda con el texto cortado.
 * La unica con altura fija es "Scale AI without losing what made it work in the first
 * place" (#10310:911), que Figma la marca a 188.
 */
.ocx-l55__row {
	flex-direction: row;
	align-items: stretch;
	gap: 32px;
	width: 100%;
	min-width: 0;
}

/*
 * La tarjeta: `--Color-Neutral-Lightest` de fondo, radio de 16px, borde de 1px y
 * padding de 32px.
 *
 * `flex:1 0 0` (grow 1 / shrink 0 / basis 0) es el valor del nodo: con basis 0 las dos
 * tarjetas de la fila se reparten el ancho por igual, y el shrink 0 evita que bajen de
 * ese reparto. Miden (597 - 32) / 2 = 282.5 a 1440, o sea 218.5 de contenido sin contar
 * el borde, contra los 219 del archivo.
 *
 * El `box-sizing:border-box` lo pone core y no es opcional: es lo que hace que el
 * `height:188px` de "Scale AI" sea el alto total de la caja y no 188 + 64 de padding.
 *
 * El borde es el `rgba(0, 0, 0, 0.15)` de Figma, no `--Color-Scheme-1-Border` (que
 * exporta #000000). El token tiene su propio comentario documentando que la
 * discrepancia es invisible mientras `--Stroke-Border-Width` sea 0px y que solo
 * habia que revisarlo "if the width ever becomes 1px": aca es exactamente ese caso, y
 * con #000000 el borde seria negro solido en vez de una linea al 15%. Es el mismo
 * criterio que el divisor del timeline de "Layout / 121 /".
 *
 * Ojo con el `var()` del nodo: `border: var(--Stroke-Border-Width, 0) solid
 * var(--Color-Scheme-1-Border, rgba(0, 0, 0, 0.15))` resuelve a `0px solid #000000`
 * con los tokens reales del theme, o sea **sin borde visible**: el fallback del
 * `var()` solo aplica si el token no existe, y los dos existen. Por eso el borde va con
 * los valores de Figma en el estilo inline del bloque y no por token.
 *
 * El padding de 32px y los gaps de 32px son literales porque no hay preset de spacing
 * para 32 (los slugs van 10, 20, 30, 40, 50, 60, 80, 100, 112, 150).
 */
.ocx-l55__card {
	flex: 1 0 0;
	min-width: 0;
	padding: 32px;
	gap: 8px;
}

/*
 * La unica tarjeta con alto declarado: "Scale AI without losing what made it work in the
 * first place" (#10310:911), `height:188px` en Figma.
 *
 * Va como `min-height` y no como `height`, y no es cosmetico. Un `height` explicito le
 * gana al `align-self:stretch` de la fila, asi que la tarjeta se queda clavada en 188
 * mientras la de al lado sigue el texto: a 1440 daba 188 contra 189.19 y a 1200/1300
 * 188 contra 219.98 (donde "Adapt as your business" pasa a 5 lineas). Con `min-height`
 * el 188 acts como piso y el stretch de la fila vuelve a mandar, asi que las dos quedan
 * iguales a cualquier ancho.
 *
 * Es ademas lo que da 188 en lugar de los 219.98/189.19 naturales del texto, que es el
 * alto que declara el nodo.
 *
 * Y va en CSS y no en el estilo inline porque los groups de core solo exponen
 * `minHeight` en el Site Editor, no `height`. Por suerte `minHeight` es justo lo que hace
 * falta.
 */
.ocx-l55__card--fixed {
	min-height: 188px;
}

/*
 * Variante con numero: `justifyContent:center` para que el bloque de numero +
 * descripcion quede centrado en el alto de la tarjeta, y `alignItems:stretch` para que
 * los dos textos ocupen el ancho completo (el centrado es del `text-align`, no del
 * ancho de la caja).
 */
.ocx-l55__card--stat {
	justify-content: center;
	align-items: stretch;
}

/*
 * Variante solo-texto: sin numero, asi que el H6 va centrado con `align-items:center` y
 * el resto de la tarjeta queda vacio arriba y abajo.
 *
 * El `align-self:stretch` es explicito (Figma lo marca en "#10218:72764") y ademas es lo
 * que empareja la fila 4: la tarjeta de "Adapt as your business" tiene 4 lineas y la de
 * "Scale AI" 3, asi que sin esto la fila quedaria con dos alturas.
 */
.ocx-l55__card--text {
	align-self: stretch;
	align-items: center;
	text-align: center;
}

/*
 * El numero grande. Figma usa **Roboto** Bold 700 a 80px con 1.2 de line height y
 * centrado, y es el unico nodo de todo el archivo que no usa Manrope.
 *
 * Roboto ya venia cargado en el theme (Google Fonts, `Roboto:wght@400;500;600;700`,
 * registrado en theme.json con slug `roboto`), asi que replicar el nodo exacto no
 * suma ninguna request ni peso nuevo. Manrope se mantiene en el `font-family` como
 * fallback por si la fuente llegara a fallar.
 *
 * Los 80px son literales y no el preset `display-sm` de theme.json (80px con
 * `fluid.min:48px`), porque ese preset bajaria el numero a 48px en mobile y Figma lo
 * tiene fijo. El 700 tampoco tiene token de font-weight.
 */
.ocx-l55__value {
	margin: 0;
	font-family: var(--wp--preset--font-family--widescreen);
	font-size: 80px;
	font-weight: 700;
	line-height: 1.2;
	text-align: center;
	color: var(--Color-Scheme-1-Text, #000);
	/*
	 * Cifras de ancho fijo para el count-up de `assets/js/stat-count-up.js`: sin esto
	 * cada digito tiene el ancho de su propio glifo y el numero "se mueve" de lado
	 * mientras sube. El texto sigue siendo el mismo, solo cambia el ancho de los
	 * digitos. Ver BACKLOG.md.
	 */
	font-variant-numeric: tabular-nums;
}

/* La descripcion del stat: "Text/Medium/Normal", centrado. */
.ocx-l55__label {
	margin: 0;
	font-family: var(--wp--preset--font-family--widescreen);
	font-size: var(--Text-Sizes-Text-Medium, 18px);
	font-weight: 400;
	line-height: 1.5;
	text-align: center;
	color: var(--Color-Scheme-1-Text, #000);
}

/* La tarjeta solo-texto: "Heading/H6", 22px / 1.4, centrado. */
.ocx-l55__text {
	margin: 0;
	font-family: var(--wp--preset--font-family--widescreen);
	font-size: var(--Text-Sizes-Heading-6, 22px);
	font-weight: 500;
	line-height: 1.4;
	letter-spacing: -0.01em;
	text-align: center;
	color: var(--Color-Scheme-1-Text, #000);
}

/*
 * Mobile de "Stats / 55 /".
 *
 * Igual que las tres secciones anteriores, Figma no define variante mobile para este
 * frame: es una instancia de la home y no un component set. El padding lo resuelven los
 * tokens y H2, descripcion y H6 bajan por sus presets.
 *
 * El corte de la fila (H2 arriba, grid abajo) va en 1200. A esa altura el grid todavia
 * entra en dos columnas: mide 728 y cada tarjeta 348, que levanta el numero de 80px
 * y los textos de 22px sin problema. Recien por debajo de 600 las tarjetas pasan a una
 * sola columna, porque a (350 - 32) / 2 = 159 de ancho el numero de 80px y los H6 de
 * varias lineas quedan ilegibles.
 *
 * Los `flex:0 1 <px>` de las dos mitades vuelven a `0 1 auto` al apilar, porque en
 * columna el basis pasaria a ser la altura.
 *
 * El `align-items:stretch` de la fila **no** va en este corte sino en la regla base, que
 * aplica a todos los anchos. Con la fila en columna, ademas de igualar las alturas, es lo
 * que hace que las tarjetas ocupen todo el ancho: core les da `align-items:flex-start` y
 * sin esto cada una se mide contra su texto mas largo, que medidos a 390 daba anchos de
 * 254.38, 242.06 y 350 en tarjetas de la misma fila.
 */
@media (max-width: 1199.98px) {
	.ocx-l55__content {
		flex-direction: column;
		align-items: stretch;
		gap: 40px;
	}

	.ocx-l55__intro,
	.ocx-l55__stats {
		flex: 0 1 auto;
	}
}

@media (max-width: 599.98px) {
	.ocx-l55__stats {
		gap: 16px;
	}

	.ocx-l55__row {
		flex-direction: column;
		gap: 16px;
	}

	/*
	 * Los 188 de "Scale AI" son un alto de escritorio. Apilada, la tarjeta queda con
	 * medio cuerpo de padding vacio y el texto pegado al techo, asi que el piso se
	 * levanta y cada tarjeta vuelve a medir su texto.
	 */
	.ocx-l55__card--fixed {
		min-height: 0;
	}
}

/*
 * Figma "FAQ / 3 /" (#10218:72614), novena seccion de la home, antes del footer.
 *
 * Mismo marco que las ocho anteriores: `padding 112px 64px` (tokens, 64/20 en mobile) y
 * fondo blanco, asi que reusa `.ocx-section--large` sobre `.ocx-section`.
 *
 * Estructura: Container > Component (fila) > "Section Title" (H2 + boton) a la izquierda
 * de 500px fijos + "Accordion List" de 6 items a la derecha. A 1440 la lista mide
 */
/* ==========================================================================
 * Industries Preview (Figma Desktop #12375:43424: w=1440, h=871, container w=1280, h=871)
 * ========================================================================== */
.ocx-industries-preview__section {
	width: 100% !important;
	max-width: 100% !important;
	background-color: var(--Color-OpenCX-Dune-Lightest, #F8F6F0) !important;
	display: flex;
	justify-content: center;
	box-sizing: border-box;
}

.ocx-industries-preview__container {
	width: 1280px;
	max-width: var(--Container-container-large, 1280px);
	min-height: 871px;
	height: 871px;
	border: var(--Stroke-Hairline, 0.5px) solid #D2B5D7;
	background: var(--Color-OpenCX-Dune-Lightest, #F8F6F0) !important;
	display: flex;
	flex-direction: row;
	justify-content: space-between;
	align-items: stretch;
	box-sizing: border-box;
	position: relative;
	margin: 0 auto;
}

.ocx-industries-preview__col-left {
	width: 718px;
	max-width: 100%;
	padding: 80px 48px;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	box-sizing: border-box;
}

.ocx-industries-preview__heading {
	font-family: var(--wp--preset--font-family--widescreen, 'Widescreen', sans-serif);
	font-size: 55px;
	line-height: 55px;
	letter-spacing: -0.55px;
	font-weight: 400;
	color: #162227;
	margin: 0;
	max-width: 622px;
}

.ocx-industries-preview__heading .ocx-industries-preview__accent {
	font-family: var(--wp--preset--font-family--widescreen-ex, "widescreen-ex", sans-serif);
	color: var(--Color-Blackberry-Light, #8F459C);
	letter-spacing: -0.03em;
}

.ocx-industries-preview__art {
	width: 100%;
	max-width: 622px;
	height: auto;
	display: block;
}

/* ==========================================================================
   INDUSTRIES SCANNER INTERACTIVE SLIDER
   ========================================================================== */
.ocx-industries-scanner {
	position: relative;
	width: 100%;
	max-width: 622px;
	height: 154px;
	margin: 0;
	overflow: hidden;
	background-color: var(--Color-OpenCX-Dune-Lightest, #F8F6F0);
	border-radius: 4px;
	user-select: none;
	-webkit-user-select: none;
	touch-action: pan-y;
	cursor: grab;
}

.ocx-industries-scanner:active,
.ocx-industries-scanner.is-dragging {
	cursor: grabbing;
}

.ocx-industries-scanner__grid {
	position: absolute;
	top: 0;
	left: 50%;
	transform: translateX(-50%);
	width: 622px;
	height: 154px;
	pointer-events: none;
	z-index: 1;
	opacity: 0.65;
}

.ocx-industries-scanner__grid img {
	display: block;
	width: 622px;
	height: 154px;
	object-fit: contain;
}

/* Edge Fade Masks */
.ocx-industries-scanner__fade {
	position: absolute;
	top: 0;
	bottom: 0;
	width: 85px;
	pointer-events: none;
	z-index: 4;
}

.ocx-industries-scanner__fade--left {
	left: 0;
	background: linear-gradient(to right, var(--Color-OpenCX-Dune-Lightest, #F8F6F0) 15%, rgba(248, 246, 240, 0) 100%);
}

.ocx-industries-scanner__fade--right {
	right: 0;
	background: linear-gradient(to left, var(--Color-OpenCX-Dune-Lightest, #F8F6F0) 15%, rgba(248, 246, 240, 0) 100%);
}

/* Sliding Track */
.ocx-industries-scanner__track {
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	display: flex;
	align-items: center;
	z-index: 2;
	cursor: grab;
	will-change: transform;
	touch-action: pan-y;
	transition: transform 0.75s cubic-bezier(0.25, 1, 0.5, 1);
}

.ocx-industries-scanner__track:active,
.ocx-industries-scanner.is-dragging .ocx-industries-scanner__track {
	cursor: grabbing;
}

.ocx-industries-scanner__item {
	flex: 0 0 154px;
	width: 154px;
	height: 154px;
	display: flex;
	align-items: center;
	justify-content: center;
	opacity: 0.38;
	filter: grayscale(25%);
	cursor: pointer;
	-webkit-user-drag: none;
	transform: scale(0.82);
	transition: transform 0.65s cubic-bezier(0.25, 1, 0.5, 1), opacity 0.45s ease, filter 0.45s ease;
}

.ocx-industries-scanner__item--active {
	opacity: 1;
	filter: grayscale(0%);
	transform: scale(1.18);
}

.ocx-industries-scanner__item img {
	display: block;
	width: 154px;
	height: 154px;
	pointer-events: none;
}

/* Fixed Center Viewfinder (Cuadrado fijo en el medio) */
.ocx-industries-scanner__viewfinder {
	position: absolute;
	top: 0;
	left: 50%;
	transform: translateX(-50%);
	width: 154px;
	height: 154px;
	pointer-events: none;
	z-index: 5;
	box-sizing: border-box;
}

/* 4 Golden Corners */
.ocx-industries-scanner__corner {
	position: absolute;
	width: 15px;
	height: 15px;
	border: 0.75px solid var(--Color-OpenCX-Dune, #B69E52);
	transition: border-color 0.3s ease, box-shadow 0.3s ease;
}

.ocx-industries-scanner__corner--tl {
	top: 0;
	left: 0;
	border-right: none;
	border-bottom: none;
}

.ocx-industries-scanner__corner--tr {
	top: 0;
	right: 0;
	border-left: none;
	border-bottom: none;
}

.ocx-industries-scanner__corner--bl {
	bottom: 0;
	left: 0;
	border-right: none;
	border-top: none;
}

.ocx-industries-scanner__corner--br {
	bottom: 0;
	right: 0;
	border-left: none;
	border-top: none;
}

/* Scanning Laser Beam */
.ocx-industries-scanner__laser {
	position: absolute;
	left: 4px;
	right: 4px;
	height: 22px;
	background: linear-gradient(180deg, rgba(182, 158, 82, 0) 0%, rgba(182, 158, 82, 0.12) 65%, rgba(182, 158, 82, 0.45) 100%);
	border-bottom: 1px solid rgba(182, 158, 82, 0.85);
	box-shadow: 0 1px 6px rgba(182, 158, 82, 0.3);
	pointer-events: none;
	animation: ocxLaserScan 3.2s ease-in-out infinite alternate;
}

@keyframes ocxLaserScan {
	0% {
		top: 6px;
		opacity: 0.3;
	}
	50% {
		opacity: 0.85;
	}
	100% {
		top: 126px;
		opacity: 0.3;
	}
}

/* Center crosshair mark */
.ocx-industries-scanner__crosshair {
	position: absolute;
	top: 50%;
	left: 50%;
	width: 6px;
	height: 6px;
	transform: translate(-50%, -50%);
	pointer-events: none;
	opacity: 0.3;
}

.ocx-industries-scanner__crosshair::before,
.ocx-industries-scanner__crosshair::after {
	content: "";
	position: absolute;
	background: var(--Color-OpenCX-Dune, #B69E52);
}

.ocx-industries-scanner__crosshair::before {
	top: 2px;
	left: -2px;
	width: 10px;
	height: 1px;
}

.ocx-industries-scanner__crosshair::after {
	top: -2px;
	left: 2px;
	width: 1px;
	height: 10px;
}

/* Scanning Target HUD Accents */
.ocx-industries-scanner__hud {
	position: absolute;
	bottom: 4px;
	right: 6px;
	font-family: var(--wp--preset--font-family--widescreen, 'Widescreen', monospace);
	font-size: 8px;
	letter-spacing: 0.08em;
	color: var(--Color-OpenCX-Dune, #B69E52);
	opacity: 0.8;
	text-transform: uppercase;
}

.ocx-industries-scanner__hud-tag {
	position: absolute;
	top: 4px;
	left: 6px;
	font-family: var(--wp--preset--font-family--widescreen, 'Widescreen', monospace);
	font-size: 8px;
	letter-spacing: 0.08em;
	color: var(--Color-OpenCX-Dune, #B69E52);
	opacity: 0.8;
}

.ocx-industries-preview__actions {
	display: flex;
	align-items: center;
}

.ocx-industries-preview__explore-btn {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	color: var(--Color-OpenCX-Dune, #B69E52) !important;
	font-family: var(--wp--preset--font-family--widescreen, 'Widescreen', sans-serif);
	font-size: 18px;
	line-height: 27px;
	font-weight: 400;
	text-decoration: none !important;
	transition: opacity 0.2s ease;
}

.ocx-industries-preview__explore-btn:hover {
	opacity: 0.8;
}

.ocx-industries-preview__col-right {
	display: flex !important;
	width: 563px !important;
	max-width: 100% !important;
	min-height: 871px !important;
	padding: var(--Section-Padding-padding-section-medium, 80px) var(--Section-Padding-padding-section-small, 48px) !important;
	flex-direction: column !important;
	align-items: flex-start !important;
	gap: 32px !important;
	flex-shrink: 0 !important;
	align-self: stretch !important;
	border-radius: var(--Radius-Medium, 20px) !important;
	border: var(--Stroke-Hairline, 0.5px) solid var(--Color-OpenCX-Dune-Light, #CBBB85) !important;
	background: var(--Color-OpenCX-Dune-Lightest, #F8F6F0) !important;
	margin: calc(-1 * var(--Stroke-Hairline, 0.5px)) -0.5px calc(-1 * var(--Stroke-Hairline, 0.5px)) 0 !important;
	box-sizing: border-box !important;
}

.ocx-industries-preview__list {
	display: flex !important;
	flex-direction: column !important;
	width: 100% !important;
	align-self: stretch !important;
	gap: 0 !important;
}

.ocx-industries-preview__item {
	width: 100% !important;
	align-self: stretch !important;
	padding: 20px 0 !important;
	border-bottom: 1px solid #D2B5D7 !important;
	display: flex !important;
	flex-direction: column !important;
	box-sizing: border-box !important;
	cursor: pointer;
	transition: background-color 0.25s ease;
}

.ocx-industries-preview__item:first-child {
	border-top: 1px solid #D2B5D7;
}

.ocx-industries-preview__item-header {
	display: flex;
	align-items: center;
	gap: 20px;
	text-decoration: none !important;
}

.ocx-industries-preview__item-icon {
	width: 0;
	height: 24px;
	flex-shrink: 0;
	display: flex !important;
	align-items: center;
	justify-content: center;
	opacity: 0;
	margin-right: -20px;
	transform: translateX(-12px);
	overflow: hidden;
	pointer-events: none;
	transition: width 0.4s cubic-bezier(0.25, 1, 0.5, 1),
	            margin-right 0.4s cubic-bezier(0.25, 1, 0.5, 1),
	            opacity 0.35s ease,
	            transform 0.4s cubic-bezier(0.25, 1, 0.5, 1);
}

.ocx-industries-preview__item--active .ocx-industries-preview__item-icon {
	width: 24px !important;
	opacity: 1 !important;
	margin-right: 0 !important;
	transform: translateX(0) !important;
}

.ocx-industries-preview__item-icon img,
.ocx-industries-preview__item-icon svg {
	width: 24px;
	height: 24px;
	display: block;
	flex-shrink: 0;
}

.ocx-industries-preview__item-title {
	font-family: var(--wp--preset--font-family--widescreen, 'Widescreen', sans-serif);
	font-size: 36px;
	line-height: 46.8px;
	letter-spacing: -0.36px;
	font-weight: 300;
	color: var(--Color-OpenCX-Dune, #B69E52);
	margin: 0;
	transition: color 0.4s cubic-bezier(0.25, 1, 0.5, 1);
}

.ocx-industries-preview__item--active .ocx-industries-preview__item-title,
.ocx-industries-preview__item:hover .ocx-industries-preview__item-title,
.ocx-industries-preview__item-header:hover .ocx-industries-preview__item-title {
	color: var(--Color-Blackberry-Light, #8F459C) !important;
}

.ocx-industries-preview__item-desc {
	font-family: var(--wp--preset--font-family--widescreen, 'Widescreen', sans-serif) !important;
	font-size: 18px !important;
	line-height: 27px !important;
	font-weight: 400 !important;
	color: #162227 !important;
	margin: 0 !important;
	width: 100% !important;
	transition: color 0.35s ease;
}

@media (min-width: 992px) and (max-width: 1279.98px) {
	.ocx-industries-preview__container {
		width: 100%;
		max-width: 100%;
		height: auto;
		min-height: auto;
	}

	.ocx-industries-preview__col-left {
		width: 54%;
		padding: 48px 32px;
	}

	.ocx-industries-preview__heading {
		font-size: clamp(38px, 3.8vw, 48px);
		line-height: 1.1em;
	}

	.ocx-industries-preview__col-right {
		width: 46% !important;
		min-height: auto !important;
		padding: 48px 32px !important;
	}

	.ocx-industries-preview__item-title {
		font-size: 28px;
		line-height: 36px;
	}
}

.ocx-f3__container {
	width: 100%;
	min-width: 0;
}

/*
 * La fila. `align-items:flex-start` es el default MIN de Figma, que este nodo no
 * sobreescribe: la columna de 500px queda pegada al tope contra una lista de 6 items que
 * le llega a medir 815px, en vez de centrarse.
 *
 * `flex-wrap:nowrap` **no** hace falta aqui, al contrario que en "Stats / 55 /": solo un
 * hijo lleva basis en px (los 500 de la intro) y el otro usa `1 1 0`, o sea que la suma de
 * los basis es 580, muy por debajo del contenedor incluso a 1200. Core puede envolver
 * tranquilamente.
 */
.ocx-f3__top {
	flex-direction: row;
	align-items: flex-start;
	gap: 80px;
	width: 100%;
	min-width: 0;
}

/*
 * "Section Title": `sizing.horizontal:fixed` de 500px, con `gap:32px` entre el H2 y el
 * boton. Se declara `flex:0 1` y no `0 0` para que en un viewport improbable baje antes
 * que romper la fila; a 1200 o mas nunca se llega a encoger.
 */
.ocx-f3__intro {
	flex: 0 1 500px;
	min-width: 0;
	gap: 32px;
}

/*
 * "Accordion List": `flex:1 1 0` para que tome los 732 que sobran. **Sin gap**, porque
 * Figma no declara ninguno: los items se separan por el borde superior de 1px de cada
 * pregunta, no por espacio en blanco.
 *
 * El `align-items:stretch` es obligatorio y es la tercera vez que este mismo detalle de
 * core rompe algo (ver "Stats / 55 /" y "Layout / 210 /"). Core pone
 * `align-items:flex-start` en `.is-layout-flex`, y en una columna el eje transversal es el
 * horizontal, asi que sin esto cada item se ajusta a su texto y **la linea de arriba de
 * cada pregunta mide lo que el texto, no la columna**: medido a 1440, la pregunta
 * "Financial Services" daba 323.55 de ancho dentro de una lista de 732, con la respuesta
 * al lado midiendo 378.41. Seis reglas de 1px desiguales, que es justo lo contrario de lo
 * que hace un acordion.
 */
.ocx-f3__list {
	flex: 1 1 0;
	min-width: 0;
	align-items: stretch;
}

/*
 * El item, con el mismo `align-items:stretch` por el mismo motivo: si el item se ajusta a
 * su contenido, el heading y el paragraph tampoco se estiran, y el borde de la pregunta
 * se queda corto otra vez.
 */
.ocx-f3__item {
	align-items: stretch;
}

/* El H2, tal cual el preset global: Manrope 500, 52px / 1.2, -0.01em, alineado a la izquierda. */
.ocx-f3__heading {
	margin: 0;
	font-family: var(--wp--preset--font-family--widescreen);
	font-size: var(--Text-Sizes-Heading-2, 52px);
	font-weight: 500;
	line-height: 1.2;
	letter-spacing: -0.01em;
	text-align: left;
	color: var(--Color-Scheme-1-Text, #000);
}

/*
 * La pregunta: H4 de 36px con `padding 20px 0` y `strokeWeight:1px 0px 0px`, o sea un
 * borde **superior** de 1px y nada mas.
 *
 * Figma se lo marca a los **seis** items, incluido el primero, asi que hay linea encima de
 * la primera pregunta. No se "corrige" quitandosela al primero: seria inventarse un
 * cambio que el archivo no pide.
 *
 * El color del borde es `#000000` de Figma (`fill_34dc0314`), no
 * `--Color-Scheme-1-Border`, por el mismo motivo que en "Stats / 55 /" y que el divisor
 * del timeline de "Layout / 121 /": el token del theme exporta negro y aqui el negro es
 * justo lo que se quiere. Va como atributo del bloque (soporte de bordes por lado de
 * core) y no en CSS, asi que queda editable en el Site Editor.
 */
.ocx-f3__question {
	padding: 20px 0;
	font-family: var(--wp--preset--font-family--widescreen);
	font-size: var(--Text-Sizes-Heading-4, 36px);
	font-weight: 500;
	line-height: 1.3;
	letter-spacing: -0.01em;
	text-align: left;
	color: var(--Color-Scheme-1-Text, #000);
}

/*
 * Los seis links a `/industries/`.
 *
 * `color:inherit` no es cosmetico: sin el, el link toma su color del theme y no
 * del H4, asi que el texto dejaria de ser `--Color-Scheme-1-Text` y el shimmer se
 * calcularia contra un color que no es el del texto. Con `inherit` el link hereda
 * el token del H4, y el futuro tema oscuro se los lleva a los dos.
 *
 * `text-decoration:none` quita el subrayado que WordPress pone a los links. Figma
 * no lo pide en este bloque: la separacion visual la hace el borde superior de 1px
 * del H4, y un subrayado compite con el barrido del shimmer.
 *
 * No se toca el anillo de foco que dibuja el navegador: el shimmer ya marca el
 * foco, pero el anillo del sistema es la garantia de que el teclado se ve, y se
 * deja como esta.
 */
.ocx-f3__question a {
	color: inherit;
	text-decoration: none;
}

/*
 * Shimmer de las seis preguntas al pasar el mouse, el efecto de "esta pensando".
 *
 * Como funciona: la banda se pinta con un gradiente al que se le recorta el fondo
 * a la forma de las letras (`background-clip:text`), con el color del texto puesto
 * a `transparent`. Lo que se ve no es un overlay ni un pseudoelemento encima: es el
 * propio texto con el degradado dentro, asi que sigue siendo texto de verdad,
 * seleccionable y leible por lectores de pantalla.
 *
 * **El portador del fondo es el `<a>`, no el H4**, y esa distincion es lo que hace
 * que el recorrido no dependa del copy. El H4 tiene que medir el ancho de la columna
 * para que el borde superior de Figma llegue de borde a borde de la lista: 732px
 * para un texto de 324px. Un fondo en el H4 se moveria sobre esos 732px, con el 56%
 * del recorrido por donde no hay letras, y medido eso hacia que la banda tardara
 * **0.9s** en llegar al texto y luego solo estuviera encima el 35% del ciclo, en
 * destellos de 50 a 200ms. Con el hover no pasaba nada visible. El `<a>` es en linea
 * y se ajusta al texto, asi que su caja **es** el texto y el recorrido va a cuento.
 *
 * El relleno a transparente va **dentro** de un `@supports` que exige las dos
 * capacidades, no solo una. Es el detalle que evita el fallo grave de esta tecnica:
 * `color-mix()` es Baseline 2023 y si no existiera, `--ocx-shimmer-band` seria un
 * valor invalido, el gradiente entero seria invalido y no habria fondo que recortar
 * mientras el texto ya es invisible. El color de texto por defecto se declara
 * primero y solo se pisa cuando se sabe que las dos cosas existen.
 *
 * `--ocx-shimmer-band` y `--ocx-shimmer-text` estan en tokens.css y se derivan de
 * Color Scheme 1, asi que el tema oscuro no necesita tocar nada de este bloque.
 *
 * ## Los numeros del recorrido
 *
 * `background-size:280%` con la banda entre el 45% y el 55% del gradiente. Como la
 * caja es el texto, la posicion de la banda es `x = 1.4 - 1.8p` (en fracciones de la
 * caja, con `p` el `background-position`) y la banda mide un 28% de la caja, o sea la
 * mitad son 14%. Esta sobre el texto entre `p = 14%` (borde izquierdo) y `p = 86%`
 * (borde derecho), y esos son los dos keyframes.
 *
 * Esos numeros dependen **solo** de `background-size` y del ancho de la banda, no de
 * cuanto ocupe el texto ni del ancho de la columna. Antes iban atados a la proporcion
 * texto/caja y habia que remedirlos cada vez que cambiaba el copy; ahora son
 * constantes. Con ellos la banda esta sobre el texto el 100% del recorrido, sin
 * zonas muertas. Si se cambia el ancho de la banda, el `280%` o los stops, hay que
 * rehacer esta cuenta, y sale sola.
 *
 * | keyframe | `background-position` | que pasa |
 * |----------|-----------------------|----------|
 * | 0%       | 86%                   | la banda entra por la izquierda, **el texto ya esta en el frame 1** |
 * | 58%      | 14%                   | cruza las palabras y sale por la derecha |
 * | 100%     | 14%                   | pausa con el texto solido |
 *
 * El ciclo es de 2.2s y no de 1.6s, y la banda va del 45% al 55% del gradiente y no
 * del 46% al 54%, porque con 1.6s y 8% el efecto se veia pero timido: el paso duraba
 * medio segundo y el trazo se aclaraba poco, asi que no se seguia con la vista. A 2.2s
 * el barrido dura ~1.27s y la banda es un 28% de la caja. El ancho importa mas de lo
 * que parece: lo que se percibe es la parte a plena intensidad, y con una banda de 8%
 * esa parte era de 68px; al 10% son 46-52px de pleno y 60-68px de banda completa, con
 * un delta medido de +119 sobre el token de 128.
 *
 * La pausa del 42% del ciclo es deliberada: es lo que hace que se lea como un destello
 * y no como un texto que late. En la pausa el `background-position` se queda en 14%,
 * donde la banda ya esta fuera del texto, y el reinicio del 14% al 86% no se ve porque
 * los dos estados pintan las palabras enteras en negro.
 *
 * Se anima `background-position`, que no se compone en GPU y repinta por frame. Aqui
 * es barato porque solo hay una linea de 36px y solo mientras hay hover, pero queda
 * anotado por si se copia el patron a algo mas grande.
 */
@supports ((background-clip: text) or (-webkit-background-clip: text)) and (color: color-mix(in oklab, red, blue)) {
	.ocx-f3__question a:is(:hover, :focus-visible) {
		background-image: linear-gradient(100deg, var(--ocx-shimmer-text) 0%, var(--ocx-shimmer-text) 45%, var(--ocx-shimmer-band) 50%, var(--ocx-shimmer-text) 55%, var(--ocx-shimmer-text) 100%);
		background-size: 280% 100%;
		background-repeat: repeat;
		background-position: 86% 0;
		-webkit-background-clip: text;
		background-clip: text;
		color: transparent;
		-webkit-text-fill-color: transparent;
		animation: ocx-shimmer-sweep 2.2s linear infinite;
	}

	/*
	 * Con el relleno transparente, lo seleccionado se ve como un bloque de color
	 * sin letras dentro. `currentColor` no sirve para arreglarlo porque aqui
	 * `currentColor` ya es el propio `transparent`, asi que el relleno de la
	 * seleccion se tiene que volver a poner a mano.
	 */
	.ocx-f3__question a::selection {
		-webkit-text-fill-color: var(--Color-Scheme-1-Text, #000000);
	}
}

@keyframes ocx-shimmer-sweep {
	0% {
		background-position: 86% 0;
	}

	58% {
		background-position: 14% 0;
	}

	100% {
		background-position: 14% 0;
	}
}

/*
 * Sin movimiento, la banda se queda congelada en el centro en vez de desaparecer: el
 * hover sigue cambiando el aspecto de las palabras, pero ya no hay animacion. Es un
 * cambio de color y no un desplazamiento, asi que no es lo que la preferencia pide
 * evitar. El 50% es el centro exacto de la caja, y como la caja es el texto, es el
 * numero que siempre se esperaria.
 */
@media (prefers-reduced-motion: reduce) {
	.ocx-f3__question a:is(:hover, :focus-visible) {
		animation: none;
		background-position: 50% 0;
	}
}

/*
 * El `padding 20px 0` de la pregunta y el `padding 0 0 24px` de la respuesta van en CSS y
 * no como atributo del bloque a proposito. El preset de 20px si existe, pero al setear
 * solo `top` y `bottom` core deja el horizontal en su default y mete los 24px de
 * `var:preset|spacing|50` en los lados, que corria la lista 48px. Y el 24 de la respuesta
 * no es preset. Con los dos en CSS el padding horizontal queda en 0, que es lo del nodo.
 */
.ocx-f3__answer {
	margin: 0;
	padding-bottom: 24px;
	font-family: var(--wp--preset--font-family--widescreen);
	font-size: var(--Text-Sizes-Text-Regular, 16px);
	font-weight: 400;
	line-height: 1.5;
	color: var(--Color-Scheme-1-Text, #000);
}

/*
 * Mobile de "FAQ / 3 /".
 *
 * Figma no define variante mobile para este frame: es una instancia de la home y no un
 * component set, asi que no hay ni desktop ni mobile que consultar. El padding de la
 * seccion lo resuelven los tokens y el H2 y el H4 bajan por sus presets (52 -> 36 y
 * 36 -> 24).
 *
 * El corte de la fila va en 1200, el mismo que en "Layout / 59 /", "Layout / 121 /",
 * "Layout / 210 /" y "Stats / 55 /". Abajo de 1200 la columna de 500px+Q no dejan ancho
 * util para la lista: a 1199 el contenido es 1071 y la lista se caeria a 491 con un H4 de
 * 36px, queTodavia entra, pero ya a 1100 daria 392 y las preguntas empezarían a cortar.
 * Apiladas, la lista toma los 1159 completos y las preguntas quedan en una linea.
 *
 * El `flex:0 1 500px` de la intro vuelve a `0 1 auto` al apilar, porque en columna el
 * basis pasaria a ser la altura. Los gaps bajan a 40 (fila) y 16 (intro), como en las
 * demas secciones.
 */
@media (max-width: 1199.98px) {
	.ocx-f3__top {
		flex-direction: column;
		align-items: stretch;
		gap: 40px;
	}

	.ocx-f3__intro {
		flex: 0 1 auto;
		gap: 16px;
	}
}

/* ---------------------------------------------------------------------------
 * Columna fija en las tres secciones de dos columnas
 *
 * "Layout / 121 /" (Why OpenCX), "Stats / 55 /" (Results) e "Industries / 3 /"
 * comparten un mismo comportamiento pedido explícitamente: la columna de la
 * izquierda -- etiqueta, H2 y botón -- queda inmóvil mientras la de la derecha
 * avanza, y se suelta sola cuando la derecha termina de pasar. Es
 * `position: sticky` pelado, sin JS ni scroll listener: eso ya lo hace el
 * navegador, y con `top` fijo el elemento se despega solo al llegar al final de
 * su contenedor, que es exactamente el "hasta que finalice el scroll de la
 * derecha".
 *
 * Va en un bloque compartido y no en la regla base de cada sección por dos
 * razones. Las tres apilan en el mismo corte (`max-width: 1199.98px`), así que el
 * comportamiento es idéntico en las tres y repetirlo tres veces solo multiplica la
 * chance de que una se quede sin actualizar. Y el `top` no es un número inventado
 * sino el padding de la sección.
 *
 * El `top` es el padding de la sección (112px a >=1200) a propósito: cuando el
 * borde superior de la sección llega a y=0, la columna está a y=112, y `top:112px`
 * la deja exactamente ahí. El anclaje no da un salto, y mientras queda clavada
 * sigue alineada con el primer ítem de la columna derecha, que también arranca a
 * 112. Un `top` inventado (digamos 40px) dejaría la columna flotando con un margen
 * distinto al del resto de la sección.
 *
 * El `align-self: start` está aunque las tres filas ya declaren
 * `align-items: flex-start`. Un ítem flex estirado no tiene recorrido: `position:
 * sticky` sobre él no se mueve nunca y no falla de ninguna forma visible, solo deja
 * de hacer efecto. Es el fallo clásico de esto, así que la defensa va al lado de la
 * regla que la evita en vez de confiar en que nadie va a tocar la fila.
 */
@media (min-width: 1200px) {
	.ocx-l121__column,
	.ocx-l55__intro,
	.ocx-f3__intro {
		position: sticky;
		top: var(--Section-Padding-padding-section-large, 112px);
		align-self: start;
	}
}

/*
 * Figma "Testimonial / 23 /" (#10218:72914), decima seccion de la home, antes del footer.
 *
 * Mismo marco que las nueve anteriores: `padding 112px 64px` (tokens) y fondo blanco, asi
 * que reusa `.ocx-section--large` sobre `.ocx-section`.
 */
/* ==========================================================================
 * Testimonial (Figma Desktop: w=1440, h=810, Outer w=1280, h=810, Inner r=20)
 * ========================================================================== */
.ocx-testimonial__section {
	width: 100% !important;
	max-width: 100% !important;
	background-color: var(--Color-OpenCX-Dune-Lightest, #F8F6F0) !important;
	display: flex;
	justify-content: center;
	padding: 0;
	box-sizing: border-box;
}

.ocx-testimonial__outer {
	width: 1280px;
	max-width: var(--Container-container-large, 1280px);
	min-height: 810px;
	height: 810px;
	border: var(--Stroke-Hairline, 0.5px) solid var(--Color-OpenCX-Dune-Light, #CBBB85);
	background: var(--Color-Blackberry-Light, #8F459C);
	position: relative;
	box-sizing: border-box;
	margin: 0 auto;
}

.ocx-testimonial__card {
	position: relative;
	width: calc(100% + (2 * var(--Stroke-Hairline, 0.5px))) !important;
	height: calc(100% + (2 * var(--Stroke-Hairline, 0.5px))) !important;
	margin: calc(-1 * var(--Stroke-Hairline, 0.5px)) !important;
	border-radius: var(--Radius-Medium, 20px);
	border: var(--Stroke-Hairline, 0.5px) solid var(--Color-OpenCX-Dune-Light, #CBBB85);
	background: var(--Color-Amber-Light, #F8F6F0);
	padding: 80px 48px;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	box-sizing: border-box;
}

.ocx-testimonial__header {
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	width: 100%;
	box-sizing: border-box;
}

.ocx-testimonial__heading {
	font-family: var(--wp--preset--font-family--widescreen, 'Widescreen', sans-serif);
	font-size: 55px;
	line-height: 55px;
	letter-spacing: -0.55px;
	font-weight: 400;
	color: #162227;
	text-align: center;
	margin: 0 auto;
	max-width: 918px;
}

.ocx-testimonial__heading .ocx-gold {
	font-family: var(--wp--preset--font-family--widescreen-ex, "widescreen-ex", sans-serif);
	color: #B69E52;
	letter-spacing: -1.65px;
}

.ocx-testimonial__slider-container {
	position: relative;
	width: 100%;
	max-width: 1184px;
	margin: 0 auto;
	display: flex;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
}

.ocx-testimonial__grid {
	display: flex;
	flex-direction: row;
	flex-wrap: nowrap;
	width: 1003px;
	max-width: 1003px;
	margin: 0 auto;
	background: transparent;
	border: none;
	box-sizing: border-box;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scrollbar-width: none;
	-ms-overflow-style: none;
	-webkit-overflow-scrolling: touch;
}

.ocx-testimonial__grid::-webkit-scrollbar {
	display: none;
}

.ocx-testimonial__item {
	flex: 0 0 334.33px;
	width: 334.33px;
	min-width: 334.33px;
	max-width: 334.33px;
	height: 396px;
	padding: 32px;
	box-sizing: border-box;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	border-top: var(--Stroke-Border-Width, 0) solid var(--Color-OpenCX-Dune-Light, #CBBB85);
	border-right: var(--Stroke-Hairline, 0.5px) solid var(--Color-OpenCX-Dune-Light, #CBBB85);
	border-bottom: var(--Stroke-Border-Width, 0) solid var(--Color-OpenCX-Dune-Light, #CBBB85);
	border-left: var(--Stroke-Hairline, 0.5px) solid var(--Color-OpenCX-Dune-Light, #CBBB85);
	background: var(--Color-Scheme-1-Foreground, #FCFBF9);
	scroll-snap-align: start;
	overflow: hidden;
}

.ocx-testimonial__quote {
	font-family: var(--wp--preset--font-family--widescreen, 'Widescreen', sans-serif);
	font-size: 18px;
	line-height: 27px;
	font-weight: 300;
	color: #162227;
	margin: 0;
	overflow-y: auto;
	scrollbar-width: none;
}

.ocx-testimonial__author-info {
	display: flex;
	flex-direction: column;
	gap: 0;
}

.ocx-testimonial__author-name {
	font-family: var(--wp--preset--font-family--widescreen, 'Widescreen', sans-serif);
	font-size: 16px;
	line-height: 24px;
	font-weight: 600;
	color: #162227;
	margin: 0;
}

.ocx-testimonial__author-role {
	font-family: var(--wp--preset--font-family--widescreen, 'Widescreen', sans-serif);
	font-size: 16px;
	line-height: 24px;
	font-weight: 400;
	color: #162227;
	margin: 0;
}

.ocx-testimonial__arrow-btn {
	position: absolute;
	width: 48px;
	height: 48px;
	padding: 0;
	margin: 0;
	border: none;
	background: transparent;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	top: 50%;
	transform: translateY(-50%);
	z-index: 2;
	transition: opacity 0.2s ease;
}

.ocx-testimonial__arrow-btn img {
	width: 48px;
	height: 48px;
	display: block;
}

.ocx-testimonial__arrow-btn--prev {
	left: 0;
}

.ocx-testimonial__arrow-btn--next {
	right: 0;
}

.ocx-testimonial__arrow-btn:hover {
	opacity: 0.85;
}

.ocx-testimonial__dots {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	width: 100%;
	margin-top: 0;
}

.ocx-testimonial__dot {
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background-color: #E9DAEB;
	display: inline-block;
	transition: background-color 0.2s ease;
}

.ocx-testimonial__dot--active {
	background-color: var(--Color-Blackberry-Light, #8F459C);
}


@media (max-width: 768px) {
	.ocx-testimonial__heading {
		font-size: 36px;
		line-height: 40px;
	}
}

.ocx-t23__container {
	width: 100%;
	min-width: 0;
	gap: 80px;
}

/*
 * Titulo: el tope de 768px va en el **grupo** y no en el `h2`, que es donde lo declara Figma.
 * Antes el `max-width` estaba en el `h2` (675px) y eso centraba el texto dentro de la caja pero
 * dejaba la caja pegada al inicio del contenedor: medido, el centro del titulo quedaba 318px a
 * la izquierda a 1440 y 558px a 1920. Ver el bloque de abajo y el BACKLOG.
 */
.ocx-t23__title {
	/*
	 * Layout del titulo, segun Figma: columna, hijos centrados, tope de 768 y 24 de gap.
	 *
	 * `align-self` es `center` y no el `stretch` literal de Figma a proposito, y es medido:
	 * con `stretch` + `max-width` el bloque queda de 768px pero **pegado al inicio** del
	 * contenedor, porque flexbox alinea al cross-start un item estirado cuyo transversal
	 * quedo limitado por `max-width`. Medido a 1440 el centro del titulo caia 272px a la
	 * izquierda del centro del contenedor, y 512px a 1920. Con `center` el desvio es 0.
	 * `width: 100%` mantiene el comportamiento "llena lo disponible hasta el tope" del
	 * `stretch`, que es lo que hace que el `max-width` sea el que corta.
	 *
	 * El `gap: 24px` gana al `:where(.is-layout-flex) { gap: 0 }` de los global styles por
	 * especificidad (`:where` no cuenta) y por orden de carga, y es el mismo mecanismo que
	 * usan `.ocx-t23__container` y `.ocx-t23__body`.
	 */
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 24px;
	align-self: center;
	width: 100%;
	max-width: var(--Max-Width-max-width-large, 768px);
}

.ocx-t23__heading {
	margin: 0;
	font-family: var(--wp--preset--font-family--widescreen);
	font-size: var(--Text-Sizes-Heading-2, 52px);
	font-weight: 500;
	line-height: 1.2;
	letter-spacing: -0.01em;
	text-align: center;
	color: var(--Color-Scheme-1-Text, #000);
}

.ocx-t23__heading .ocx-gold {
	font-family: var(--wp--preset--font-family--widescreen-ex, "widescreen-ex", sans-serif);
	color: #B69E52;
	letter-spacing: -1.65px;
}

/*
 * "Content": columna con `alignItems:center` y gap 48. El centrado solo afecta al boton,
 * que es `hug`; la fila y los dots llevan `alignSelf:stretch` en Figma, asi que acá van con
 * `width:100%`.
 */
.ocx-t23__body {
	align-items: center;
	gap: 48px;
	width: 100%;
	min-width: 0;
}

/*
 * El track: la fila de 6 tarjetas.
 *
 * **Es un carrusel, no una fila.** 6 x 405 + 5 x 32 = 2590 de ancho en un contenedor de
 * 1312: entran 3.2 tarjetas, que es justo lo que dibuja Figma (la 4ta asoma 31px, y la
 * flecha derecha esta en x=1260, encima de ese borde).
 *
 * Por eso el track es un contenedor de scroll horizontal con `scroll-snap`, que es lo unico
 * que da un carrusel **real sin JS**: se desliza con el dedo, con la rueda y con shift+rueda,
 * y engancha en cada tarjeta. El scrollbar se oculta porque Figma no lo tiene.
 *
 * `flex-wrap:nowrap` es obligatorio: core pone `flex-wrap:wrap` en `.is-layout-flex` y las 6
 * tarjetas se irian a 3 filas de 2 en vez de desbordar. Es el problema del "Stats / 55 /"
 * de nuevo, pero aca al revés: sin el `nowrap` no hay desborde, hay wrap, y `scrollWidth`
 * da 1312 (el del contenedor) porque el track scrollea, asi que el chequeo de overflow
 * tampoco lo detecta.
 *
 * `align-items:flex-start` es el default MIN de Figma, que este nodo no sobreescribe: cada
 * tarjeta es `vertical:hug`, o sea que quedan pegadas al tope con finales desiguales. Es lo
 * que dice el archivo, pero con contenido real de 6 testimonios de largo parecido lo natural
 * seria estirarlas; ver el BACKLOG.
 */
.ocx-t23__track {
	flex-direction: row;
	flex-wrap: nowrap;
	align-items: flex-start;
	gap: 32px;
	width: 100%;
	min-width: 0;
	overflow-x: auto;
	overscroll-behavior-x: contain;
	scroll-snap-type: x mandatory;
	scrollbar-width: none;
	-ms-overflow-style: none;
}

.ocx-t23__track::-webkit-scrollbar {
	display: none;
}

/*
 * La tarjeta: `sizing.horizontal:fixed` de 405px, `padding 32px`, `gap 32px`, fondo
 * `--Color-Neutral-Lightest`, radio 16px y borde de 1px (el `rgba(0, 0, 0, 0.15)` de
 * Figma, no `--Color-Scheme-1-Border`: ver "Stats / 55 /").
 *
 * `flex:0 0 min(405px, 100%)` resuelve el ancho sin ningun breakpoint: 405px mientras entre
 * y `100%` cuando el contenedor se queda sin lugar, que recien pasa a 437px de viewport
 * (405 + los 32 de padding de la seccion en mobile). El `scroll-snap-align:start` es lo que
 * hace que cada tarjeta sea un punto de enganche.
 *
 * El fondo, el radio y el borde van como atributos del bloque para que queden editables en el
 * Site Editor, igual que en las tarjetas de "Stats / 55 /". El padding y los gaps van en CSS
 * porque 32 no es preset de spacing.
 */
.ocx-t23__card {
	flex: 0 0 min(405px, 100%);
	min-width: 0;
	padding: 32px;
	gap: 32px;
	scroll-snap-align: start;
}

/*
 * El grupo que envuelve logo + contenido en las tarjetas 5 y 6 ("Content", `gap 48`). En las
 * tarjetas 1 a 3 el nodo equivalente tiene un solo hijo, asi que su gap de 48 es inerte y se
 * colapsa: por eso el markup no es uniforme entre tarjetas, igual que en el archivo.
 */
.ocx-t23__group {
	gap: 48px;
}

/*
 * El contenido de la tarjeta ("Content", `gap 24`). El `align-items:stretch` es
 * obligatorio y es la cuarta vez que el `align-items:flex-start` de core rompe algo: en una
 * columna el eje transversal es el horizontal, asi que sin esto la fila del avatar se
 * ajustaria a su texto en vez de ocupar los 339px de contenido de la tarjeta.
 */
.ocx-t23__inner {
	align-items: stretch;
	gap: 24px;
}

/* La cita: `Text/Medium/Normal`, o sea 18px / 1.5, peso 400, alineada a la izquierda. */
.ocx-t23__quote {
	margin: 0;
	font-family: var(--wp--preset--font-family--widescreen);
	font-size: var(--Text-Sizes-Text-Medium, 18px);
	font-weight: 400;
	line-height: 1.5;
	color: var(--Color-Scheme-1-Text, #000);
}

/* La fila del avatar: `alignItems:center` y `gap 16`. */
.ocx-t23__avatar {
	align-items: center;
	gap: 16px;
}

/*
 * El avatar: un `ELLIPSE` de 48x48 con `objectFit:cover`, o sea que se recorta al centro. El
 * `img` es un rectangulo y el circulo lo hace el `border-radius`; aca solo va el tamano,
 * el recorte real va en el hijo (ver `.ocx-t23__avatar-img img` mas abajo).
 *
 * El archivo es `avatar-1.png`, que ya estaba en el theme sin usarse y resulto ser
 * **byte-identico** al `imageRef` que exporta Figma para los 6 avatares (`imageRef` es unico
 * porque las 6 son instancias de la misma plantilla `EL-18ba1cef`): md5
 * `3e4a862abafeecc87ecada3720a7943d`, 1260x709. No se agrega una copia.
 */
.ocx-t23__avatar-img {
	width: 48px;
	height: 48px;
	flex: 0 0 auto;
	overflow: hidden;
}

/*
 * Nombre y rol: `Text/Regular/Semi Bold` (600) y `Text/Regular/Normal` (400), los dos de
 * 16px / 1.5. El grupo **no** declara gap, o sea 0 entre las dos lineas, que es lo que
 * hace que el bloque mida justo 48 y combine con la altura del avatar.
 */
.ocx-t23__name,
.ocx-t23__role {
	margin: 0;
	font-family: var(--wp--preset--font-family--widescreen);
	font-size: var(--Text-Sizes-Text-Regular, 16px);
	line-height: 1.5;
	color: var(--Color-Scheme-1-Text, #000);
}

.ocx-t23__name {
	font-weight: 600;
}

.ocx-t23__role {
	font-weight: 400;
}

/*
 * La imagen del avatar. El bloque `core/image` pone la clase en el `<figure>`, no en el
 * `<img>`, asi que el recorte circular y el `object-fit` van en el hijo: si se dejaran en la
 * figura, el `img` conservaria su relacion natural (1260x709) y se veria achatado a 48x27
 * dentro de un circulo vacio.
 *
 * El selector lleva dos clases a proposito: `core` declara `.wp-block-image img` con
 * `height:auto` y `max-width:100%`, que tiene la misma especificidad (0,1,1) que
 * `.ocx-t23__avatar-img img` y depende del orden de carga. Anadir `.ocx-t23__avatar` sube a
 * (0,2,1) y gana siempre.
 */
.ocx-t23__avatar .ocx-t23__avatar-img img {
	display: block;
	width: 100%;
	height: 100%;
	max-width: none;
	border-radius: 50%;
	object-fit: cover;
}

/* Los logos de cliente: 120x48 fijos, dos variantes distintas ("Logo=1" y "Logo=2"). */
.ocx-t23__logo {
	width: 120px;
	height: 48px;
}

/*
 * Los dots: fila centrada con gap 8 y `sizing.vertical:fixed` de 28, o sea que los 8px de
 * cada dot van centrados en una banda de 28. El primero es el activo (`#000000` opaco) y los
 * otros 5 al 20% de opacidad.
 *
 * Son `core/spacer` y no paragraphs vacios: es un bloque de core justamente para separar o
 * decorar, y viene con `aria-hidden`, asi que no mete un `<p>` vacio en el documento.
 *
 * Los dots son **estaticos**: reflejan la posicion 1 de 6 que dibuja Figma, pero sin JS
 * no pueden seguir el scroll del track. Y las flechas de "Slider Arrow" (que Figma posiciona
 * en absoluto en x=-28 y x=1260) no se implementaron: son controles y sin JS serian botones
 * que no hacen nada. Ver el BACKLOG.
 */
.ocx-t23__dots {
	/*
	 * `display:flex` va aca y no viene de core: los dots son un bloque `core/html`, no un
	 * `core/group`, asi que no reciben `is-layout-flex`. Sin esto los botones quedan inline y
	 * el whitespace entre ellos en el HTML cuenta como separador (medido: pitch 11.61 en vez
	 * de 16, y la banda 28.8 en vez de 28 por la linea base).
	 */
	display: flex;
	justify-content: center;
	align-items: center;
	gap: 8px;
	min-height: 28px;
	width: 100%;
}

/*
 * El viewport del track: un contenedor sin layout propio que solo aporta `position:relative`
 * para que las flechas puedan superponerse. Hace falta porque las flechas **no** pueden ir
 * dentro del track: un `position:absolute` dentro de un contenedor con scroll se posiciona
 * contra su *padding box* pero **se mueve con el contenido**, asi que viaja con el scroll.
 *
 * `layout:default` en el markup para que el div no sea un flex container: el track tiene que
 * seguir siendo un bloque de ancho completo.
 *
 * El `width:100%` no es cosmetico. El body es una columna con `align-items:center`, asi que
 * sin el el viewport seria un flex item `fit-content` y su ancho se derivaria de su contenido:
 * el `100%` del track se volveria **ciclico** (el padre se define por el hijo que se define
 * por el padre) y el navegador lo resuelve con la parte en px, dejando las tarjetas en 405 y
 * desbordando la pagina a 390 (medido: `scrollWidth` 1084 con viewport 390). Con el viewport
 * en 350 el `min(405px, 100%)` de la tarjeta resuelve a 350 y el pitch pasa a 382.
 */
.ocx-t23__viewport {
	position: relative;
	width: 100%;
	min-width: 0;
}

/*
 * Las flechas. Se posicionan en absoluto sobre `inset:0`, o sea exactamente la caja del
 * track, y se reparten con `space-between`: la anterior en el borde izquierdo visible y la
 * siguiente en el derecho. `pointer-events:none` en el contenedor y `auto` en los botones para
 * que el track siga scrolleando a traves de ellas.
 *
 * Figma las pone en absoluto en `x:-28` y `x:1260` respecto de la seccion, pero la **izquierda
 * quedaria fuera del viewport** (el padding lateral de la seccion es de 64, asi que un `-28`
 * se recorta) y la derecha quedaria a 52 del borde, no en el borde. Se descarta la posicion
 * literal: superpuestas sobre los bordes del area visible es lo unico que las hace usables, y
 * es el montage estandar de un carrusel. Ver el BACKLOG.
 *
 * `display:none` por defecto: son **controles**, y sin JS serian dos botones que no hacen
 * nada. El JS marca la seccion con `data-ocx-carousel="ready"` recien cuando ya estan
 * conectados, y recien ahi aparecen.
 */
.ocx-t23__arrows {
	display: none;
	position: absolute;
	inset: 0;
	align-items: center;
	justify-content: space-between;
	padding-inline: 16px;
	pointer-events: none;
}

.ocx-t23__section[data-ocx-carousel] .ocx-t23__arrows {
	display: flex;
}

/*
 * El boton de flecha envuelve el SVG exportado de Figma, que es de 48x48 e **incluye el fondo
 * `#F2F2F2` y el borde blanco cocinados dentro** (por eso el boton no necesita fondo ni borde
 * ni padding). El area de 48x48 es el minimo tactil razonable.
 */
.ocx-t23__arrow {
	flex: 0 0 auto;
	padding: 0;
	border: 0;
	background: none;
	line-height: 0;
	cursor: pointer;
	/*
	 * `pointer-events` se hereda y el contenedor lo apaga para no tapar el scroll del track,
	 * asi que cada boton lo tiene que volver a prender. Sin esto los dots funcionan pero las
	 * flechas no: el click pasa de largo y solo responden a `.click()` desde JS.
	 */
	pointer-events: auto;
}

.ocx-t23__arrow img {
	display: block;
	width: 48px;
	height: 48px;
}

.ocx-t23__arrow:hover:not(:disabled) img {
	opacity: 0.75;
}

/* En los extremos no hay a donde ir, asi que el boton se apaga en vez de quedar inerte. */
.ocx-t23__arrow:disabled {
	cursor: default;
}

.ocx-t23__arrow:disabled img {
	opacity: 0.35;
}

/* Los dots ahora son `<button>` reales (ver el JS): 8x8, sin padding ni borde de core. */
.ocx-t23__dot {
	width: 8px;
	height: 8px;
	flex: 0 0 auto;
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: var(--Color-Scheme-1-Text, #000);
	appearance: none;
	-webkit-appearance: none;
}

.ocx-t23__dot[aria-current] {
	opacity: 1;
}

.ocx-t23__dot:not([aria-current]) {
	opacity: 0.2;
}

/*
 * `disabled` en el markup y el JS lo saca: sin JS los dots no son tabulables y se ven
 * exactamente igual que la version decorativa anterior. Con JS pasan a ser controles.
 */
.ocx-t23__dot:disabled {
	cursor: default;
}

.ocx-t23__dot:not(:disabled) {
	cursor: pointer;
}

.ocx-t23__dot:not(:disabled):hover {
	opacity: 0.6;
}

/* Foco visible en los tres controles y en el track. */
.ocx-t23__arrow:focus-visible,
.ocx-t23__dot:focus-visible {
	outline: 2px solid var(--Color-Scheme-1-Text, #000);
	outline-offset: 4px;
	border-radius: 2px;
}

.ocx-t23__track:focus-visible {
	outline: 2px solid var(--Color-Scheme-1-Text, #000);
	outline-offset: -2px;
}

/*
 * Mobile de "Testimonial / 23 /".
 *
 * Figma no define variante mobile: es una instancia de la home y no un component set. El
 * padding de la seccion lo resuelven los tokens y el H2 baja 52 -> 36.
 *
 * **No hay breakpoint para el ancho de la tarjeta**: `flex:0 0 min(405px, 100%)` la baja a
 * `100%` sola cuando no entra. Por debajo de 600 el quote baja de 18 a 16 por el token
 * `--Text-Sizes-Text-Medium`, asi que las tarjetas quedan un poco mas bajas.
 */
@media (max-width: 599.98px) {
	.ocx-t23__container {
		gap: 40px;
	}

	.ocx-t23__body {
		gap: 24px;
	}
}

/*
 * La variante "Read case study" de los botones de tarjeta.
 *
 * Es la misma instancia del set 4179:8871 que "Explore Testimonials", pero con dos overrides
 * en el texto: `#000000` en vez de `#B69E52` y `Text/Regular/Normal` (400) en vez de
 * `Text/Regular/Medium` (500). El chevron no lleva override, asi que sigue siendo el
 * `chevron_right` negro de siempre, igual que en el boton dorado.
 *
 * El `borderRadius:"12px 0px 12px 0px"` del nodo tampoco se replica, por lo mismo que en
 * "FAQ / 3 /": sin fondo ni borde ni padding el radio no dibuja nada.
 *
 * Ojo con el selector: hace falta la clase del boton **y** la del modificador, porque
 * `.ocx-btn--link` define el color y el peso con la misma especificidad (0,2,0) y el orden en
 * el archivo no alcanza para desempatar.
 */
.wp-block-button.ocx-btn--link.ocx-btn--link--plain .wp-block-button__link {
	color: var(--Color-Scheme-1-Text, #000);
	font-weight: 400;
}

/* ---------------------------------------------------------------------------
 * "CTA / 25 /" — seccion de cierre: H2 + parrafo + un boton, todo centrado.
 *
 * El fondo **no** se declara aca: es `backgroundColor:"base"` en el markup, que es el fondo de
 * seccion (`#FFFFFF` en el nodo).
 *
 * El padding si, y a proposito: los valores del nodo son fijos
 * (`padding: 112px 64px`) y los de la cadena de clases no los dan. Ver la nota de padding mas
 * abajo, que es la razon de que esta regla tenga dos clases y no una.
 *
 * Los dos `gap: 80px` de Figma (seccion y Container) son inertes: cada uno de esos nodos
 * tiene un solo hijo. Quedan declarados igual para que el editor muestre la estructura del
 * archivo, que es el criterio que se viene usando.
 * --------------------------------------------------------------------------- */
.ocx-c25__section {
	gap: 80px;

	/*
	 * `align-items: center` segun el layout dado. Queda anulado por el `align-self: stretch`
	 * del container, que en flexbox siempre le gana al `align-items` del padre para ese item,
	 * asi que el container sigue ocupando el ancho completo como en Figma. Se declara igual
	 * porque es lo que dice el nodo, y depende del orden: esta regla esta DESPUES de
	 * `.ocx-section--stretch`, que tambien pone `align-items: stretch` con la misma
	 * especificidad (0,1,0).
	 */
	align-items: center;
}

/*
 * Ojo: el `style.spacing.padding` del atributo del bloque **no sirve aca**. En los nueve
 * `.ocx-section` esta en el markup y core lo descarta en silencio (ver BACKLOG): el rendered
 * llega con `style="margin-top:0;margin-bottom:0"` y sin padding. Solo el hero, que es
 * `layout: default`, recibe el suyo. Los valores van ahi como px duros, no como
 * `var:preset|spacing|…`, que tampoco se emiten aunque los presets existan en `theme.json`.
 *
 * El padding en si va con tokens, en la regla de arriba.
 */
/*
 * Padding por tokens: 112 arriba / 64 lateral / 112 abajo en desktop, y 64/20 por debajo
 * de 1200.
 *
 * Antes iba `112px 64px` duro, con el argumento de que asi gana "en cualquier ancho". El
 * problema es que 64px es el valor **de desktop** de Figma y a 390 se comia 64 de cada
 * lado: el Container del CTA quedaba en 262px contra los 350 de las demas secciones de la
 * misma pagina (medido en Industries y en About). Con los tokens el valor computado a
 * >=1200 sigue siendo 112/64, o sea que desktop no cambia; lo que se corrige es mobile.
 *
 * El `style.spacing.padding` del bloque **no sirve**: core lo descarta en silencio (ver
 * BACKLOG). Los valores del markup van ahi como px duros.
 */
.ocx-section.ocx-c25__section {
	padding: var(--Section-Padding-padding-section-large, 112px) var(--Page-Padding-padding-global, 64px);
}

.ocx-c25__container {
	align-self: stretch;
	width: 100%;
	min-width: 0;
	gap: 80px;

	/*
	 * Figma: `alignItems:stretch`. Hace falta declararlo porque core pone
	 * `align-items: flex-start` en los grupos con `orientation: vertical`, y con flex-start el
	 * hijo se encoge a su max-content en vez de llenar. Sin esto el `Content` midio 1279.81
	 * (el max-content del H2) en vez de 1792, y todo el bloque quedo 256px a la izquierda.
	 */
	align-items: stretch;

	/*
	 * El tope de 768 del nodo va **aca**, en el Container, y no solo en el Content. Es la unica
	 * forma de que el Content mida 768 y quede centrado a la vez, porque el `align-self: stretch`
	 * y los margenes auto son mutuamente excluyentes en flexbox (el `stretch` solo aplica "if
	 * neither of the cross-axis margins are auto"). Ver la nota larga de `.ocx-c25__content`.
	 *
	 * Con el `width: 100%` mas este `max-width`, el Container mide 768 y los margenes auto lo
	 * centran; despues el Content si se estira a 768 con su `align-self: stretch`.
	 */
	max-width: var(--Max-Width-max-width-large, 768px);
}

/*
 * Centrado del Container, con margenes auto.
 *
 * Hace falta el selector con combinador de hijo, no un `.ocx-c25__container` pelado, porque
 * **WordPress resetea los margenes de los hijos de un flex layout**:
 * `.is-layout-flex > :is(*, div) { margin: 0 }`. Esa regla es (0,1,1) —la clase mas el tipo que
 * `:is()` toma de su argumento mas especifico, `div`—, asi que le gana a (0,1,0). Con
 * `margin-inline: auto` en la regla pelada computaba `0px/0px` y no movia nada. Con el
 * combinador de hijo queda (0,2,0) y gana.
 */
.ocx-section > .ocx-c25__container {
	margin-inline: auto;
}

/*
 * Figma: `alignSelf:stretch, maxWidth:768px` y `alignItems:center, gap:32px`.
 *
 * El `align-self: stretch` se mantiene, y el `max-width: 768px` tambien, pero **el tope que produce
 * la caja de 768 esta en el Container** (arriba), no aca. Con el `max-width` solo en el Content:
 *
 * - `stretch` + `max-width` deja el bloque de 768 pegado al inicio de la linea, porque un item
 *   estirado que topa con su `max-width` se alinea como si fuera `flex-start`. Medido: el bloque
 *   en `x=64`, con el H2 y el boton 512px a la izquierda del centro en 1920.
 * - Centrarlo con `margin-inline: auto` aca **funciona pero rompe el ancho**: el flexbox dice que
 *   `stretch` solo aplica "if neither of the cross-axis margins are auto", asi que con margenes auto
 *   el Content deja de estirarse y se dimensiona por su contenido. Medido: `719.33px`, que es el
 *   max-content del parrafo, en vez de 768.
 *
 * O sea que los margenes auto y el `align-self: stretch` son **mutuamente excluyentes**. Por eso
 * el `max-width` de aca es no-op (el Content nunca pasa de 768 porque su padre ya mide 768): se
 * deja declarado porque el nodo lo pide, y la caja de 768 la produce el del Container.
 */
.ocx-c25__content {
	align-self: stretch;
	max-width: var(--Max-Width-max-width-large, 768px);
	align-items: center;
	gap: 32px;
}

/*
 * Figma: `alignSelf:stretch, alignItems:stretch, sizing:fill, gap:24px`. El `stretch` del
 * `align-items` es el que estira el H2 y el parrafo a todo el ancho: sin esto serian
 * fit-content y, como el grupo padre los alineaba al inicio, el texto quedaria a la izquierda
 * aunque lleve `text-align: center` (el `center` centraria dentro de una caja que ya esta
 * corrida). Es el mismo mecanismo del descentrado del titulo de "Testimonial / 23 /".
 */
.ocx-c25__text {
	align-self: stretch;
	align-items: stretch;
	gap: 24px;
}

/* `Heading/H2`: Manrope Medium 52, lh 1.2, ls -0.01em, centrado, #000. */
.ocx-c25__heading {
	margin: 0;
	font-family: var(--wp--preset--font-family--widescreen);
	font-size: var(--Text-Sizes-Heading-2, 52px);
	font-weight: 500;
	line-height: 1.2;
	letter-spacing: -0.01em;
	text-align: center;
	color: var(--Color-Scheme-1-Text, #000);
}

/* `Text/Medium/Normal`: Manrope Regular 18, lh 1.5, centrado, #000. */
.ocx-c25__lead {
	margin: 0;
	font-family: var(--wp--preset--font-family--widescreen);
	font-size: var(--Text-Sizes-Text-Medium, 18px);
	font-weight: 400;
	line-height: 1.5;
	text-align: center;
	color: var(--Color-Scheme-1-Text, #000);
}

/* `Actions`: fila, gap 16, `hug`. Centrada porque el padre las centra en el eje transversal. */
.ocx-c25__actions {
	gap: 16px;
	justify-content: center;
}

/*
 * El boton es el componente `Button` con `Style=Primary` (`#4179:8872`), el mismo que usan
 * los dos headers, asi que se reusa `.ocx-btn--primary` y no se toca esa clase: solo se
 * agregan los tres detalles que el nodo de esta seccion tiene y la clase no.
 *
 * - `strokes: #B69E52, strokeWeight: 1px`: la clase compartida declara `border: 0`.
 * - `Text/Regular/Medium` es Manrope **Medium (500)**; la clase compartida usa `font-weight: 300`.
 * - El label del nodo esta en `#FFFFFF`; la clase compartida usa `--Color-Spring-Wood`
 *   (`#F8F6F0`), que es un blanco con un pelo de crema. La diferencia no se ve, pero el nodo
 *   dice blanco y el token `--Color-White` existe.
 *
 * Especificidad (0,3,0) contra (0,2,0) de `.ocx-btn--primary`, asi que gana sin depender del
 * orden en el archivo. Queda pendiente de decision si esos tres detalles deberian ser globales
 * (ver BACKLOG).
 */
.wp-block-button.ocx-c25__btn .wp-block-button__link {
	border: 1px solid var(--Color-Husk, #b69e52);
	font-weight: 400;
	color: var(--Color-White, #fff);
	border-radius: 0px !important;
}

/* Figma master CTA Homepage container and buttons */
.ocx-c25__section {
	width: 100% !important;
	max-width: 100% !important;
	background-color: var(--Color-OpenCX-Dune-Lightest, #F8F6F0);
	display: flex;
	justify-content: center;
	padding: 0;
	box-sizing: border-box;
}

.ocx-cta-homepage__container {
	width: 1280px;
	max-width: var(--Container-container-large, 1280px);
	min-height: 469px;
	height: 469px;
	border: var(--Stroke-Hairline, 0.5px) solid var(--Color-OpenCX-Dune-Light, #CBBB85);
	border-radius: 0 0 20px 20px;
	background-color: var(--Color-Amber-Light, #F8F6F0);
	background-image: url('../images/pattern-tile.svg');
	background-repeat: repeat;
	background-size: 80px 80px;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	margin: 0 auto;
	padding: 0 80px;
	box-sizing: border-box;
}

.ocx-cta-homepage__container .ocx-c25__content {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	text-align: center;
	width: 100%;
	max-width: 768px;
	gap: 32px;
	margin: 0 auto;
}

.ocx-cta-homepage__container .ocx-c25__text {
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	gap: 24px;
	width: 100%;
}

.ocx-cta-homepage__container .ocx-c25__heading {
	font-family: var(--wp--preset--font-family--widescreen, 'Widescreen', sans-serif);
	font-size: 50px;
	line-height: 60px;
	letter-spacing: -0.5px;
	font-weight: 400;
	color: #162227;
	text-align: center;
	margin: 0;
}

.ocx-cta-homepage__container .ocx-c25__lead {
	font-family: var(--wp--preset--font-family--widescreen, 'Widescreen', sans-serif);
	font-size: 18px;
	line-height: 27px;
	font-weight: 300;
	color: #162227;
	text-align: center;
	margin: 0;
}

.ocx-cta-homepage__container .ocx-c25__actions {
	display: flex;
	justify-content: center;
	align-items: center;
	width: 100%;
}

.ocx-cta-homepage__btn-primary {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 129px;
	height: 44px;
	background: var(--Color-OpenCX-Dune, #B69E52) !important;
	border: 1px solid var(--Color-OpenCX-Dune, #B69E52) !important;
	color: var(--Color-OpenCX-White, #FCFBF9) !important;
	border-radius: 0px !important;
	font-family: var(--wp--preset--font-family--widescreen, 'Widescreen', sans-serif) !important;
	font-size: 16px !important;
	line-height: 24px !important;
	font-weight: 300 !important;
	text-decoration: none !important;
	box-sizing: border-box;
	transition: background-color 0.2s ease;
}

.ocx-cta-homepage__btn-primary:hover {
	background: #9d8744 !important;
}

.ocx-cta-homepage__btn-secondary {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 148px;
	height: 44px;
	background: transparent !important;
	border: 1px solid var(--Color-OpenCX-Dune, #B69E52) !important;
	color: var(--Color-OpenCX-Dune, #B69E52) !important;
	border-radius: 0px !important;
	font-family: var(--wp--preset--font-family--widescreen, 'Widescreen', sans-serif) !important;
	font-size: 16px !important;
	line-height: 24px !important;
	font-weight: 400 !important;
	text-decoration: none !important;
	box-sizing: border-box;
	transition: background-color 0.2s ease;
}

.ocx-cta-homepage__btn-secondary:hover {
	background: rgba(182, 158, 82, 0.08) !important;
}

/*
 * =============================================================================
 * Footer / 3 / (#10244:544)
 * =============================================================================
 *
 * Es el unico template part compartido por `front-page.html` e `index.html`, asi
 * que estos estilos no pueden depender de ninguna de las dos plantillas.
 *
 * Capa 1 - caja de la seccion. Reusa `.ocx-section` para el padding tokenizado
 * (80/64 escritorio, 48/20 por debajo de 1200) y el fondo, y declara el ancho
 * de 1440px del nodo. `.ocx-section--frame` hace lo mismo pero se alinea a la
 * izquierda por encima de 1440; aqui se centra, que es lo que corresponde a una
 * pagina que grows hacia los dos lados.
 *
 * `align-items: center` es la directiva del layout; el unico hijo lleva
 * `align-self: stretch`, asi que el resultado es el `stretch` de Figma.
 */
.ocx-footer {
	box-sizing: border-box;
	width: 100% !important;
	max-width: 100% !important;
	background-color: var(--Color-OpenCX-Dune-Lightest, #F8F6F0);
	display: flex;
	justify-content: center;
	align-items: center;
	padding: 80px 64px !important;
	margin: 0 !important;
}

.ocx-footer__container {
	width: 100%;
	max-width: var(--Container-container-large, 1280px);
	min-height: auto;
	background-color: var(--Color-OpenCX-Dune-Light, #CBBB85);
	border: 1px solid var(--Color-OpenCX-Dune, #B69E52);
	border-radius: var(--Radius-Medium, 20px);
	padding: 112px 80px 48px 80px;
	display: flex;
	flex-direction: column;
	gap: 80px;
	box-sizing: border-box;
	margin-inline: auto;
}

.ocx-footer__brand-row {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 5px;
	width: 100%;
}

.ocx-footer__logo-link {
	display: inline-block;
	text-decoration: none;
	line-height: 0;
}

.ocx-footer__logo-link img {
	width: 163px;
	height: 41px;
	display: block;
}

.ocx-footer__tagline {
	line-height: 0;
}

.ocx-footer__tagline img {
	width: 277px;
	height: 27px;
	display: block;
}

.ocx-footer__main {
	display: flex;
	justify-content: space-between;
	align-items: stretch;
	width: 100%;
	gap: 64px;
}

/* Left Column */
.ocx-footer__left {
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	width: 463px;
	max-width: 463px;
	flex-shrink: 0;
	gap: 32px;
}

.ocx-footer__social {
	display: flex;
	align-items: center;
	gap: 12px;
	height: 24px;
}

.ocx-footer__social-link {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 24px;
	height: 24px;
	text-decoration: none;
	transition: opacity 0.2s ease, transform 0.2s ease;
}

.ocx-footer__social-link:hover {
	opacity: 0.7;
	transform: translateY(-1px);
}

.ocx-footer__social-link svg,
.ocx-footer__social-link img {
	width: 24px;
	height: 24px;
	display: block;
}

/* Newsletter Card */
.ocx-footer__card {
	background-color: #162227;
	border-radius: 16px;
	padding: 32px;
	box-sizing: border-box;
	display: flex;
	flex-direction: column;
	width: 100%;
	margin-top: auto;
}

.ocx-footer__card-title {
	margin: 0 0 4px 0;
	font-family: var(--wp--preset--font-family--widescreen, 'Widescreen', sans-serif);
	font-weight: 400;
	font-size: 44px;
	line-height: 1.2;
	color: #B69E52;
	letter-spacing: -0.01em;
}

.ocx-footer__card-subtitle {
	margin: 0 0 28px 0;
	font-family: var(--wp--preset--font-family--widescreen, 'Widescreen', sans-serif);
	font-weight: 300;
	font-size: 24px;
	line-height: 1.4;
	color: #F8F6F0;
}

.ocx-footer__newsletter-form {
	display: flex;
	flex-direction: column;
	width: 100%;
	margin-bottom: 22px;
}

.ocx-footer__form-group {
	display: flex;
	align-items: center;
	width: 100%;
	height: 48px;
	background-color: #162227;
	border: 1px solid #FCFBF9;
	box-sizing: border-box;
	padding: 0 6px 0 16px;
}

.ocx-footer__feedback {
	font-family: var(--wp--preset--font-family--inter, 'Inter', sans-serif);
	font-size: 13px;
	line-height: 1.4;
	margin-top: 10px;
	display: none;
	animation: ocx-fade-in 0.3s ease;
}

.ocx-footer__feedback--success {
	display: block;
	color: #B69E52;
}

.ocx-footer__feedback--error {
	display: block;
	color: #FF8A80;
}

@keyframes ocx-fade-in {
	from { opacity: 0; transform: translateY(-4px); }
	to { opacity: 1; transform: translateY(0); }
}

.ocx-footer__input {
	flex: 1;
	min-width: 0;
	background: transparent;
	border: none;
	outline: none;
	font-family: var(--wp--preset--font-family--widescreen, 'Widescreen', sans-serif);
	font-weight: 300;
	font-size: 16px;
	line-height: 24px;
	color: #FCFBF9;
	padding: 0;
	margin: 0;
}

.ocx-footer__input::placeholder {
	color: #FCFBF9;
	opacity: 0.9;
}

.ocx-footer__submit-btn {
	background: transparent;
	border: none;
	padding: 0;
	margin: 0;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 36px;
	height: 36px;
	flex-shrink: 0;
	transition: transform 0.2s ease, opacity 0.2s ease;
}

.ocx-footer__submit-btn:hover {
	opacity: 0.8;
	transform: translateX(2px);
}

.ocx-footer__disclaimer {
	margin: 0;
	font-family: var(--wp--preset--font-family--inter, 'Inter', sans-serif);
	font-weight: 400;
	font-size: 10px;
	line-height: 14px;
	color: #FCFBF9;
	text-align: center;
}

.ocx-footer__disclaimer-link {
	color: #FCFBF9;
	text-decoration: underline;
	transition: opacity 0.2s ease;
}

.ocx-footer__disclaimer-link:hover {
	opacity: 0.8;
}

/* Right Navigation Grid */
.ocx-footer__nav-grid {
	display: grid;
	grid-template-columns: repeat(3, 180px);
	justify-content: space-between;
	column-gap: 20px;
	row-gap: 48px;
	width: 580px;
	max-width: 580px;
	flex-shrink: 0;
}

.ocx-footer__nav-group {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
}

.ocx-footer__nav-group--login {
	grid-column: 3;
}

.ocx-footer__group-title {
	display: block;
	font-family: var(--wp--preset--font-family--widescreen, 'Widescreen', sans-serif);
	font-size: 16px;
	line-height: 24px;
	font-weight: 600;
	color: #162227;
	padding: 8px 0;
	margin: 0;
}

.ocx-footer__nav-list {
	list-style: none;
	margin: 0;
	padding: 0;
	width: 100%;
}

.ocx-footer__nav-list li {
	margin: 0;
	padding: 0;
	width: 100%;
}

.ocx-footer__nav-link {
	display: block;
	width: 100%;
	padding: 8px 0;
	font-family: var(--wp--preset--font-family--widescreen, 'Widescreen', sans-serif);
	font-size: 16px;
	line-height: 24px;
	font-weight: 400;
	color: #162227;
	text-decoration: none;
	transition: color 0.2s ease;
}

.ocx-footer__nav-link--multiline {
	line-height: 20px;
}

.ocx-footer__nav-link:hover {
	color: var(--Color-OpenCX-Berry, #8F459C);
}

.ocx-footer__nav-link--console {
	display: inline-flex;
	align-items: center;
	gap: 8px;
}

.ocx-footer__external-icon {
	width: 24px;
	height: 24px;
	flex-shrink: 0;
	color: #162227;
	transition: color 0.2s ease, transform 0.2s ease;
}

.ocx-footer__nav-link--console:hover .ocx-footer__external-icon {
	color: var(--Color-OpenCX-Berry, #8F459C);
	transform: translate(1px, -1px);
}

/* Credits & Legal */
.ocx-footer__credits {
	display: flex;
	flex-direction: column;
	gap: 32px;
	width: 100%;
}

.ocx-footer__divider {
	width: 100%;
	margin: 0;
	border: 0;
	border-top: 1px solid var(--Color-OpenCX-Dune, #B69E52);
	opacity: 1;
}

.ocx-footer__legal {
	display: flex;
	align-items: center;
	justify-content: flex-end;
	width: 100%;
}

.ocx-footer__copyright {
	margin: 0;
	font-family: var(--wp--preset--font-family--widescreen, 'Widescreen', sans-serif);
	font-size: 12px;
	line-height: 18px;
	font-weight: 400;
	color: #162227;
	text-align: right;
}

@media (min-width: 992px) and (max-width: 1240px) {
	.ocx-footer {
		padding: 64px 10px 48px 10px !important;
	}
	.ocx-footer__container {
		width: 100% !important;
		max-width: 100% !important;
		margin: 0 auto !important;
		padding: 64px 48px 48px;
	}
	.ocx-footer__main {
		gap: 32px;
	}
	.ocx-footer__left {
		width: 380px;
		max-width: 380px;
	}
	.ocx-footer__nav-grid {
		width: 100%;
		max-width: 100%;
		grid-template-columns: repeat(3, 1fr);
		column-gap: 16px;
	}
}

/*
 * "Layout / 19 /" (#10338:1712) del ecosistema, la grilla 2x2 de los cuatro pilares.
 *
 * Diferencia clave con el resto: el `Container` es una **grilla** 2x2 con columnas
 * `minmax(0,1fr)` y filas `fit-content(100%)`, dentro de una seccion de **alto fijo
 * `1381px`**. La grilla completa va en CSS y **no** en los atributos del bloque: el
 * Container se deja sin `layout` y sin `blockGap` para que core no genere ningun
 * `wp-container-*` con `grid-template-rows: repeat(2, minmax(0,1fr))` peleandose por
 * especificidad y enterrando el `fit-content(100%)` del nodo.
 *
 * La seccion lleva `ocx-section--large` por el `padding: 112px 64px`; bajo 1200px los
 * tokens cambian a 64px/20px. `height: 1381px` viene del `designedHeight` del nodo y es
 * fijo en todos los anchos, con el mismo riesgo del caso de los 418 del hero (el
 * contenido se recorta si no cabe). No hay frame movil en Figma, asi que el mobile lo
 * define el `@media` de mas abajo de esta seccion: una sola columna y el alto caido.
 */
.ocx-section.ocx-l19__section {
	height: 1381px;

	/*
	 * `align-items: center` segun el layout dado. En la practica queda anulado por el
	 * `align-self: stretch` del Container, que en flexbox siempre le gana al `align-items`
	 * del padre. Se declara igual por (0,2,0) para ganarle a `.ocx-section--stretch`, que
	 * pone `align-items: stretch` con (0,1,0).
	 */
	align-items: center;
}

/*
 * "Container" (#10338:1713). El selector con padre es a proposito: `.is-layout-flex >
 * :is(*, div) { margin: 0 }` es (0,1,1) y le ganaria a un `margin-inline: auto` pelado,
 * que es (0,1,0) y ademas computa a 0px. Con el `.ocx-section >` delante la regla llega
 * a (0,2,0) y el auto absorbe lo que sobra del tope lateral de 1280px: a 1440 la seccion
 * deja 1312px y el Container mide 1280 con 16px a cada lado.
 *
 * `display: inline-grid` de un flex item se blockifica a `grid`, asi que da lo mismo que
 * `display: grid`; se deja el valor que da el nodo. `grid-auto-flow: row` ordena las
 * cuatro tarjetas en dos filas de a dos.
 */
.ocx-section > .ocx-l19__container {
	display: inline-grid;
	box-sizing: border-box;
	max-width: var(--Container-container-large, 1280px);
	row-gap: 80px;
	column-gap: 80px;
	grid-template-rows: repeat(2, fit-content(100%));
	grid-template-columns: repeat(2, minmax(0, 1fr));
	grid-auto-flow: row;
	align-self: stretch;
	width: 100%;
	min-width: 0;
	margin-inline: auto;
}

/*
 * "Component" (#10338:1714, #10218:70620, #10218:70724, #10338:1729). Item de la grilla:
 * los defaults de una grilla (`align-self: stretch`, `justify-self: stretch`) hacen que
 * cada tarjeta llene el track, asi que en la fila mas alta de las dos, la mas baja se
 * estira y las dos de la fila quedan del mismo alto. Las alturas fijas 555/528 del
 * `Content` en Figma son ruido del wireframe (no cuadran con los 1381 del nodo: serian
 * 1414) y se ignoran: todo va a hug.
 */
.ocx-l19__component {
	min-width: 0;
}

/*
 * "Content" y "Section Title": `align-items: center` llega por `layout.justifyContent`
 * en el atributo del bloque (el volteo de la rama vertical de core). Con `center` los
 * hijos se encogen salvo que lleven `align-self: stretch`, asi que el nivel siguiente lo
 * lleva junto con `width: 100%` y `min-width: 0`.
 *
 * `.ocx-l19__text` va en la misma lista y no es cosmetico: sin `stretch` se ajusta a
 * max-content, y a 375 la tarjeta de la grilla 2x2 mide 128px mientras el H3 a 32px
 * necesita 202, con lo que el texto se salia 5px del viewport. Al estirar, el
 * `width: 100%` de los hijos pasa a ser el de la tarjeta y el H3 envuelve.
 */
.ocx-l19__content,
.ocx-l19__title,
.ocx-l19__text {
	align-self: stretch;
	width: 100%;
	min-width: 0;
}

/*
 * El bloque de H3 + parrafo. En Figma la cabecera sale centrada y el parrafo pegado a la
 * izquierda, para lo que hace falta que los dos llenen el ancho de la tarjeta: contra el
 * `align-items: center` del grupo (el default de `.is-layout-flex`), cada uno se lleva su
 * propio `align-self: stretch`.
 */
.ocx-l19__text > :is(.wp-block-heading, p) {
	align-self: stretch;
	width: 100%;
	min-width: 0;
}

.ocx-l19__image {
	margin: 0;
}

.ocx-l19__image img {
	width: 227px;
	height: 227px;
	object-fit: cover;
	border-radius: 16px;
	display: block;
}

.ocx-l19__label {
	margin: 0;
	font-family: var(--wp--preset--font-family--widescreen);
	font-size: var(--Text-Sizes-Text-Regular, 16px);
	font-weight: 600;
	line-height: 1.5;
	color: var(--Color-Scheme-1-Text, #000000);
}

.ocx-l19__title .wp-block-heading {
	margin: 0;
	font-family: var(--wp--preset--font-family--widescreen);
	font-size: var(--Text-Sizes-Heading-3, 44px);
	font-weight: 500;
	line-height: 1.2;
	letter-spacing: -0.01em;
	text-align: center;
	color: var(--Color-Scheme-1-Text, #000000);
}

.ocx-l19__text > p {
	margin: 0;
	font-family: var(--wp--preset--font-family--widescreen);
	font-size: var(--Text-Sizes-Text-Medium, 18px);
	font-weight: 400;
	line-height: 1.5;
	color: var(--Color-Scheme-1-Text, #000000);
}

/*
 * Movil de "Layout / 19 /" — la grilla 2x2 a una columna.
 *
 * Figma no tiene frame movil para este nodo (es un FRAME suelto, no un component set),
 * asi que se sigue la convencion del resto de la hoja: apilar a una columna y bajar los
 * gaps. A 375 las dos columnas de `minmax(0,1fr)` quedaban en 128px, con la imagen de
 * 227 reescalada a 128 y un H3 de 32px que no cabe.
 *
 * El `height: 1381px` de la seccion es el `designedHeight` del nodo y se cae en mobile
 * por el mismo motivo que los 418 del hero: apiladas, las cuatro tarjetas necesitan mas
 * de 1381 y el alto fijo las recortaria.
 */
@media (max-width: 1199.98px) {
	.ocx-section.ocx-l19__section {
		height: auto !important;
		min-height: auto !important;
	}
}

@media (max-width: 599.98px) {
	.ocx-section.ocx-l19__section {
		height: auto;
	}

	.ocx-section > .ocx-l19__container {
		grid-template-columns: minmax(0, 1fr);
		grid-template-rows: none;
		row-gap: 40px;
		column-gap: 0;
	}

	.ocx-l19__component {
		gap: 24px;
	}
}

/*
 * "Layout / 491 /" (#10218:69803) — Security, Governance & Data Ownership.
 *
 * La seccion usa el padding 112px/64px de `ocx-section--large` (bajo 1200 pasa a
 * 64/20 por tokens) y un Container gris #F2F2F2 de 1280px (radius 16, padding
 * 78/124). Adentro: un bloque de 920px (tagline + H1 55 + parrafo 18) y un
 * bloque centrado con los features (909px) y la tabla comparativa de 1024px.
 *
 * No hay frame movil en Figma: los valores fijos (columnas 440, tabla 1024,
 * padding 78/124) se conservan bajo breakpoint y a teléfonos la tabla puede
 * desbordar, igual que en l19 se deja y se reporta la consecuencia.
 *
 * El Container se centra con `margin-inline: auto` (0,2,0) para ganarle a
 * `.is-layout-flex > :is(*, div) { margin: 0 }` (0,1,1). Los gaps de los
 * grupos en columna llegan por los `blockGap` del markup (clases wp-container).
 */
.ocx-section > .ocx-l491__container {
	display: flex;
	box-sizing: border-box;
	width: 100%;
	max-width: var(--Container-container-large, 1280px);
	padding: 78px 124px;
	margin-inline: auto;
	align-self: stretch;
	background: var(--Color-Neutral-Lightest, #F2F2F2);
	border-radius: 16px;
}

/*
 * Los dos "Content". El primero (#10218:69805) es ancho 920 fijo con padding
 * 40px 1px; el segundo (#10390:566) va a hug (lo define la tabla, 1024) y cae
 * centrado con `align-self: center`.
 */
.ocx-l491__block {
	box-sizing: border-box;
	width: 920px;
	max-width: 100%;
	min-width: 0;
	padding: 40px 1px;
}

.ocx-l491__block--compare {
	width: auto;
	padding: 40px 0;
	align-self: center;
}

.ocx-l491__title,
.ocx-l491__features,
.ocx-l491__content {
	min-width: 0;
}

.ocx-l491__features {
	width: 909px;
	max-width: 100%;
}

.ocx-l491__tagline,
.ocx-l491__lead {
	margin: 0;
	font-family: var(--wp--preset--font-family--widescreen);
	color: var(--Color-Scheme-1-Text, #000000);
}

.ocx-l491__tagline {
	font-size: var(--Text-Sizes-Text-Regular, 16px);
	font-weight: 600;
	line-height: 1.5;
}

.ocx-l491__lead {
	font-size: var(--Text-Sizes-Text-Medium, 18px);
	font-weight: 400;
	line-height: 1.5;
	/* La copia de Figma es UN nodo de texto con saltos \n entre parrafos. */
	white-space: pre-line;
}

.ocx-l491__title .wp-block-heading,
.ocx-l491__features .wp-block-heading {
	margin: 0;
	font-family: var(--wp--preset--font-family--widescreen);
	font-size: var(--Text-Sizes-Heading-1, 72px);
	font-weight: 500;
	line-height: 1;
	letter-spacing: -0.01em;
	color: var(--Color-Scheme-1-Text, #000000);
}

/*
 * Tabla comparativa (#10390:576). Ancho 1024 (max-width-xlarge), columna de
 * etiquetas fija 440 y dos columnas flexibles. Cada celda lleva su borde
 * inferior rgba(0,0,0,0.15). No se fuerza height: 514px del nodo: el alto
 * natural (la cabecera text-wrapea con "Traditional Enterprise Platform") ya
 * cuadra cerca de ese total, y forzarlo dejaria hueco fantasma en el pie.
 */
.ocx-l491__table,
.ocx-l491__table.ocx-l491__table {
	display: block;
	width: 100%;
	min-width: 0;
	max-width: var(--Max-Width-max-width-xlarge, 1024px);
}

.ocx-l491__row.ocx-l491__row {
	/* El core le da `align-items:center` a `.is-layout-flex`; las celdas deben
	 * estirarse al alto de la fila para que el border-bottom de las tres
	 * columnas sea continuo (la línea divisoria no puede cortarse). */
	align-items: stretch;
}

.ocx-l491__row:not(.ocx-l491__row--head) .ocx-l491__cell--label,
.ocx-l491__row:not(.ocx-l491__row--head) .ocx-l491__cell--feat {
	/* Figma "table rows": celdas de alto 80px. Se usa min-height (no height)
	 * para que una fila cuyo texto envuelve >2 líneas no quede recortada; la
	 * columna OpenCX llega a 80 por estiramiento de la fila. */
	min-height: 80px;
}

.ocx-l491__row {
	display: flex;
}

.ocx-l491__cell {
	box-sizing: border-box;
	display: flex;
	align-items: center;
	margin: 0;
	border-bottom: 1px solid rgba(0, 0, 0, 0.15);
}

.ocx-l491__cell--label {
	flex: 0 0 440px;
	width: 440px;
	min-width: 0;
	padding: 16px 24px 16px 0;
	font-family: var(--wp--preset--font-family--widescreen);
	font-size: var(--Text-Sizes-Text-Regular, 16px);
	font-weight: 400;
	line-height: 1.5;
	color: var(--Color-Scheme-1-Text, #000000);
}

.ocx-l491__cell--feat,
.ocx-l491__cell--oc {
	flex: 1 0 0;
	min-width: 0;
	padding: 16px 24px;
	justify-content: center;
	text-align: center;
	font-family: var(--wp--preset--font-family--widescreen);
	font-size: var(--Text-Sizes-Text-Regular, 16px);
	font-weight: 600;
	line-height: 1.5;
	color: var(--Color-Scheme-1-Text, #000000);
}

.ocx-l491__row--head .ocx-l491__cell {
	flex-direction: column;
	justify-content: center;
	align-items: center;
	padding-top: 24px;
	padding-bottom: 24px;
}

.ocx-l491__row--head .ocx-l491__cell--label {
	justify-content: normal;
	align-items: stretch;
}

.ocx-l491__row--head .ocx-l491__cell--feat {
	/* la celda del medio de la cabecera es la unica con fondo propio en el nodo */
	background: var(--Color-Neutral-Lightest, #F2F2F2);
}

.ocx-l491__row--head .ocx-l491__cell--feat .wp-block-heading,
.ocx-l491__row--head .ocx-l491__cell--oc .wp-block-heading {
	margin: 0;
	font-family: var(--wp--preset--font-family--widescreen);
	font-size: var(--Text-Sizes-Text-Large, 22px);
	font-weight: 700;
	line-height: 1.5;
	color: var(--Color-Scheme-1-Text, #000000);
}

/*
 * Movil (375, Figma "Comparison / 5 /" #5634:1062) — la tabla de tres columnas
 * no cabe: la etiqueta tiene `flex: 0 0 440px` fijo y las otras dos celdas
 * `flex: 1 0 0` (shrink 0), asi que la fila no baja de 584px y desborda
 * cualquier viewport de menos de eso. El nodo movil resuelve el desborde
 * dejando `wrap: true` en la fila: la etiqueta ocupa el 100% y los dos valores
 * caen en una fila 50/50 debajo. La cabecera (que solo tiene los dos nombres de
 * producto) se queda en dos celdas de 50% al lado, y la celda de etiqueta
 * vacia se oculta porque no hay nada que alinear.
 *
 * El container gris tambien baja su padding de 78/124: a 390px los 124px
 * horizontales dejaban 102px utiles de contenido y el H2 se partia en 4 lineas.
 * El mobile del nodo pagina a 64/20, y el gris queda a 48/20.
 *
 * El apilado de la tabla va hasta 767.98 y no hasta 599.98 porque la fila de
 * escritorio necesita 584px (440 de etiqueta + 2 celdas de 72) mas los 40 del
 * padding de la seccion: entre 600 y 623 el layout de tres columnas seguia
 * desbordando, y de 624 a 767 las celdas de valor quedaban con 92-144px de texto
 * partido. Figma no define tablet para estos nodos, asi que se elige el corte
 * donde la grilla de tres columnas deja de caber.
 */
@media (max-width: 599.98px) {
	.ocx-section > .ocx-l491__container {
		padding: 48px 20px;
	}

	.ocx-l491__block,
	.ocx-l491__features {
		width: 100%;
		padding: 24px 0;
	}
}

@media (max-width: 767.98px) {
	.ocx-l491__row {
		flex-wrap: wrap;
	}

	.ocx-l491__row--head .ocx-l491__cell--empty {
		display: none;
	}

	.ocx-l491__row--head .ocx-l491__cell--feat,
	.ocx-l491__row--head .ocx-l491__cell--oc {
		flex: 1 1 0;
		width: 50%;
		padding: 16px 8px;
	}

	.ocx-l491__row:not(.ocx-l491__row--head) .ocx-l491__cell--label {
		flex: 1 0 100%;
		width: 100%;
		min-height: 0;
		padding: 16px 0;
	}

	.ocx-l491__row:not(.ocx-l491__row--head) .ocx-l491__cell--feat,
	.ocx-l491__row:not(.ocx-l491__row--head) .ocx-l491__cell--oc {
		flex: 1 1 0;
		width: 50%;
		padding: 16px 8px;
		min-height: 0;
	}
}

/*
 * "Comparison / 5 /" (#10218:71272) — Why Not Just Use Open Sourced LLM's.
 *
 * Reusa la tabla comparativa de .ocx-l491__* tal cual (misma estructura de
 * filas/celdas y specs de border-bottom continuo). La diferencia sobre l491:
 * - Sin container gris: el container es solo un eje centrado (gap 80) sin
 *   fondo ni padding, max-width 1280.
 * - Titulo centrado de 956px: tagline 16 SemiBold + H2 52 Medium (no 55) +
 *   lead 18 Regular, todos centrados (text-align center); el lead trae \n\n.
 * - La celda del medio de la cabecera es blanca (#FFF), no #F2F2F2.
 */
.ocx-section > .ocx-l5__container {
	display: flex;
	box-sizing: border-box;
	width: 100%;
	max-width: var(--Container-container-large, 1280px);
	margin-inline: auto;
	align-self: stretch;
}

.ocx-l5__title {
	box-sizing: border-box;
	width: 956px;
	max-width: 100%;
	min-width: 0;
	align-self: center;
}

.ocx-l5__title-content.ocx-l5__title-content {
	/* el core alinea centro en `.is-layout-flex`; el contenido del titulo debe
	 * estirarse al ancho del titulo (956) y centrar su H2 y su párrafo. */
	align-items: stretch;
}

.ocx-l5__title .wp-block-heading {
	margin: 0;
	font-family: var(--wp--preset--font-family--widescreen);
	font-size: var(--Text-Sizes-Heading-2, 52px);
	font-weight: 500;
	line-height: 1.2;
	letter-spacing: -0.01em;
	text-align: center;
	color: var(--Color-Scheme-1-Text, #000000);
}

.ocx-l5__tagline,
.ocx-l5__lead {
	margin: 0;
	font-family: var(--wp--preset--font-family--widescreen);
	color: var(--Color-Scheme-1-Text, #000000);
}

.ocx-l5__tagline {
	font-size: var(--Text-Sizes-Text-Regular, 16px);
	font-weight: 600;
	line-height: 1.5;
	text-align: center;
	align-self: stretch;
}

.ocx-l5__lead {
	font-size: var(--Text-Sizes-Text-Medium, 18px);
	font-weight: 400;
	line-height: 1.5;
	text-align: center;
	/* un solo nodo de texto con \n\n entre parrafos */
	white-space: pre-line;
}

/*
 * Bloque de la tabla: se centra en el container y mide hasta 1024
 * (Max-Width-xlarge). Las filas/celdas heredan todo de .ocx-l491__row/cell.
 */
.ocx-l5__content {
	box-sizing: border-box;
	align-self: center;
	width: 100%;
	max-width: var(--Max-Width-max-width-xlarge, 1024px);
	min-width: 0;
}

.ocx-l5__content .ocx-l491__row--head .ocx-l491__cell--feat {
	/* en esta seccion la celda central de la cabecera es blanca, no gris */
	background: var(--Color-Scheme-1-Background, #FFF);
}

/*
 * =============================================================================
 * "CTA / 25 /" (#10218:72241) — Now see what this looks like in your industry.
 * =============================================================================
 *
 * Es el mismo componente "CTA / 25 /" que el front-page usa como .ocx-c25__*,
 * pero esta instancia del ecosistema difiere en tres cosas:
 *
 * - El Container es de 1280 (Container-large) y el Content de 768
 *   (Max-Width-large) vive DENTRO de el, centrado; en el front-page el tope de
 *   768 estaba directamente en el Container y no habia Content ancho.
 * - Lleva DOS botones: el primario "Let's meet" y un secundario gris
 *   (fill rgba(0,0,0,.05)) "Explore Industries". El front-page tenia uno solo.
 * - La seccion se dibuja sobre blanco (el nodo declara el fondo #FFF).
 *
 * Estructura (del nodo): Section > Container > Content > [Content(Texto) +
 * Actions]. Section y Container declaran gap 80 pero tienen un solo hijo, asi
 * que esos gap son inertes (como en .ocx-c25__section).
 */

/*
 * Capa 1 - Section: columna con padding 112/64 y los hijos centrados. Como en
 * c25, el `align-items: center` del layout queda anulado por el
 * `align-self: stretch` del container, que es lo que pide el nodo.
 */
.ocx-section.ocx-l25__section {
	padding: 112px 64px;
	background: var(--Color-Scheme-1-Background, #FFF);
	align-items: center;
	gap: 80px;
}

/*
 * Capa 2 - Container: tope 1280 centrado con margenes auto. El `align-self:
 * stretch` en un flex es incompatible con el centrado por margenes (ver la nota
 * larga de .ocx-c25__container), asi que aqui se usa el `width: 100%` +
 * `max-width` + `margin-inline: auto`, el mismo patron que .ocx-l5__container.
 */
.ocx-section > .ocx-l25__container {
	box-sizing: border-box;
	width: 100%;
	max-width: var(--Container-container-large, 1280px);
	min-width: 0;
	margin-inline: auto;
	gap: 80px;
}

/*
 * Capa 3 - Content: el bloque de 768 que vive centrado dentro del Container.
 * Con `align-self: center` + `width: 100%` + `max-width` se obtiene el 768
 * centrado y los textos/acciones se reparten los 768 (ver .ocx-l5__content).
 */
.ocx-l25__content {
	box-sizing: border-box;
	align-self: center;
	width: 100%;
	max-width: var(--Max-Width-max-width-large, 768px);
	min-width: 0;
	align-items: center;
	gap: 32px;
}

/*
 * Capa 4a - Texto: columna de 24px con los hijos estirados a los 768 para que
 * el texto centrado quede dentro de la caja completa (mecanismo de
 * .ocx-c25__text).
 */
.ocx-l25__text {
	align-self: stretch;
	align-items: stretch;
	gap: 24px;
}

.ocx-l25__heading {
	margin: 0;
	font-family: var(--wp--preset--font-family--widescreen);
	font-size: var(--Text-Sizes-Heading-2, 52px);
	font-weight: 500;
	line-height: 1.2;
	letter-spacing: -0.01em;
	text-align: center;
	color: var(--Color-Scheme-1-Text, #000);
}

.ocx-l25__text p {
	margin: 0;
	font-family: var(--wp--preset--font-family--widescreen);
	font-size: var(--Text-Sizes-Text-Medium, 18px);
	font-weight: 400;
	line-height: 1.5;
	text-align: center;
	color: var(--Color-Scheme-1-Text, #000);
}

/*
 * Capa 4b - Actions: fila hug con gap 16. Core alinea el contenedor a la
 * izquierda, asi que el `justify-content: center` es el que centra los dos
 * botones dentro de los 768.
 */
.ocx-l25__actions {
	gap: 16px;
	justify-content: center;
}

/*
 * Boton primario "Let's meet": componente `Button` Style=Primary (#4179:8872),
 * reutiliza `.ocx-btn--primary` y agrega los detalles del nodo que la clase
 * compartida no trae: borde Husk, label Manrope Medium y texto blanco — los
 * mismos tres detalles que documenta .ocx-c25__btn.
 */
.wp-block-button.ocx-l25__btn .wp-block-button__link {
	border: 1px solid var(--Color-Husk, #b69e52);
	font-weight: 500;
	color: var(--Color-White, #fff);
}

/*
 * Boton secundario "Explore Industries": componente `Button` con
 * Style=Secondary (#4179:8892) en SU variante gris de este nodo: fill
 * rgba(0,0,0,.05), sin borde visible (stroke blanco transparente), label en
 * negro con Manrope Medium. No reutiliza `.ocx-btn--secondary` del header,
 * que es un gris distinto con borde Ambar y texto navy.
 */
.wp-block-button.ocx-l25__btn-alt .wp-block-button__link {
	display: flex;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
	background: rgba(0, 0, 0, 0.05);
	color: var(--Color-Scheme-1-Text, #000);
	border: 1px solid rgba(255, 255, 255, 0);
	padding: 10px 24px;
	font-family: var(--wp--preset--font-family--widescreen);
	font-size: 16px;
	font-weight: 500;
	line-height: 1.5;
}

.wp-block-button.ocx-l25__btn-alt .wp-block-button__link:hover {
	text-decoration: none;
}

/*
 * "Header / 62 /" (#10218:66801) de la pagina Solution.
 *
 * Es el mismo componente que el hero del ecosistema (`.ocx-h62__*`, que reusa
 * este template de seccion), pero esta instancia difiere en tres cosas:
 *
 *  1. Component tiene `width: 896px` fijo en vez de estirarse a la caja.
 *  2. Trae un tagline ("SOlaaS (Solution as a service)") como primer hijo.
 *  3. Todo centrado: section y container con `align-items: center`, texto
 *     centrado, y el unico boton centrado (igual que el h62 del ecosistema).
 *
 * La seccion declara `align-items: center` (el layout dado), que queda anulado
 * por el `align-self:stretch` del Container para ese item, igual que en h62;
 * el texto y el boton se centran porque Content y Actions llevan su propio
 * `justifyContent: center` en el atributo del bloque.
 */
.ocx-s62__section {
	padding: 112px 64px;
	align-items: center;
}

.ocx-s62__container {
	align-self: stretch;
	width: 100%;
	min-width: 0;
	max-width: var(--Container-container-large, 1280px);
}

.ocx-section > .ocx-s62__container {
	margin-inline: auto;
}

/*
 * "Component" (#10218:66803): `width: 896px` fijo en Figma. Se baja a
 * `max-width` + `width: 100%` para que por debajo del ancho de diseno el
 * componente se llene en vez de salirse. Es hijo unico del Container, que ya
 * centra sus hijos con `align-items: center` (via `justifyContent` del
 * atributo), asi que no hace falta margin aparte.
 *
 * `min-width: 0` evita que una palabra larga del H1 empuje la caja.
 */
.ocx-s62__component {
	align-self: center;
	width: 100%;
	min-width: 0;
	max-width: 896px;
	align-items: center;
}

/*
 * "Tagline" (#10244:33684): Figura "Heading/Tagline", Manrope SemiBold 600 a
 * 16px con 150% de line height. Es un `p` plano dentro del Component, asi que
 * se centra via el `align-items` del padre y el texto con `text-align`.
 */
.ocx-s62__tagline {
	margin: 0;
	font-family: var(--wp--preset--font-family--widescreen);
	font-size: var(--Text-Sizes-Text-Regular, 16px);
	font-weight: 600;
	line-height: 1.5;
	text-align: center;
	color: var(--Color-Scheme-1-Text, #000000);
}

/*
 * "Section Title" (#10218:66804) y "Content" (#10218:66807): estiran su ancho
 * para que el texto quede dentro del Component de 896px. Sin esto el H1 se
 * encoge a su max-content y el parrafo a los 896, desalineando el margen.
 */
.ocx-s62__title,
.ocx-s62__content {
	align-self: stretch;
	width: 100%;
	min-width: 0;
}

/*
 * El tipo va con selectores de hijo igual que `.ocx-h62__*`: el copy sigue
 * siendo un bloque core plano. "Heading/H1" (55px) y "Text/Medium/Normal"
 * (18px) declaran `textAlignHorizontal: CENTER`. 55px es el override local del
 * text style, por eso el literal en vez del token (igual que `.ocx-h62__content`).
 */
.ocx-s62__content .wp-block-heading {
	margin: 0;
	font-family: var(--wp--preset--font-family--widescreen);
	font-size: var(--Text-Sizes-Heading-1, 72px);
	font-weight: 500;
	line-height: 1;
	letter-spacing: -0.01em;
	text-align: center;
	color: var(--Color-Scheme-1-Text, #000000);
}

.ocx-s62__content p {
	margin: 0;
	font-family: var(--wp--preset--font-family--widescreen);
	font-size: var(--Text-Sizes-Text-Medium, 18px);
	font-weight: 400;
	line-height: 1.5;
	text-align: center;
	color: var(--Color-Scheme-1-Text, #000000);
}

/*
 * "Layout / 4 /" (#10218:67365) de la pagina Solution: workflow automation.
 *
 * Fila en dos columnas: Content (flex 1, columna con tagline + H2 + grilla 2x2
 * de items) y una imagen placeholder fija de 469x500 con radius 16. El
 * Component alinea sus hijos con `align-items: flex-end` (como dice el layout
 * dado), asi que Content e imagen bajan al fondo de la fila.
 *
 * La seccion lleva `ocx-section--large` por el `padding: 112px 64px` y fondo
 * blanco.
 */

/*
 * Container: `align-items: flex-start` segun el layout dado. El unico hijo, el
 * Component, lleva `align-self: stretch` (llega por el `alignFullWidth` / la
 * base), asi que en flexbox el `align-items` del padre queda anulado para ese
 * item y el Component igual llena los 1280. Se declara porque es lo que dice
 * el nodo, igual que en las otras secciones.
 */
.ocx-s4__container {
	align-self: stretch;
	width: 100%;
	min-width: 0;
	max-width: var(--Container-container-large, 1280px);
	align-items: flex-start;
}

.ocx-section > .ocx-s4__container {
	margin-inline: auto;
}

/*
 * "Component" (#10218:67367): fila con `align-items: flex-end` y `gap: 80px`.
 * El `verticalAlignment: bottom` en el atributo del bloque es lo que produce
 * el `align-items: flex-end` (en la rama horizontal de core esa combinacion
 * no esta volteada como en la vertical).
 */
.ocx-s4__component {
	align-self: stretch;
	width: 100%;
	min-width: 0;
}

/*
 * "Content" (#10218:67368): columna con `flex: 1 0 0` para que tome el lugar
 * que deja la imagen fija de 469px. `min-width: 0` evita que una palabra larga
 * estire la columna por encima de lo que le toca en la fila.
 */
.ocx-s4__content {
	flex: 1 0 0;
	min-width: 0;
	align-items: flex-start;
}

/*
 * Contenido interno: estira el ancho de la columna para que tagline, H2 y los
 * items de la grilla queden alineados a la izquierda (flex-start) sobre el
 * mismo margen, sin `align-items: stretch` no lo harian.
 */
.ocx-s4__body,
.ocx-s4__title,
.ocx-s4__heading,
.ocx-s4__list {
	align-self: stretch;
	width: 100%;
	min-width: 0;
}

/*
 * El tipo: tagline "Workflow Automation" (Heading/Tagline, 16px SemiBold 600,
 * 150% lh), H2 (52px/500/lh 1.2/ls -0.01em) y los H6 de los items (22px/500/
 * lh 1.4/ls -0.01em). Todo va a la izquierda.
 */
.ocx-s4__tagline,
.ocx-s4__heading .wp-block-heading,
.ocx-s4__card .wp-block-heading,
.ocx-s4__card p,
.ocx-s4__bullets {
	margin: 0;
	font-family: var(--wp--preset--font-family--widescreen);
	color: var(--Color-Scheme-1-Text, #000000);
	text-align: left;
}

.ocx-s4__tagline {
	font-size: var(--Text-Sizes-Text-Regular, 16px);
	font-weight: 600;
	line-height: 1.5;
}

.ocx-s4__heading .wp-block-heading {
	font-size: var(--Text-Sizes-Heading-2, 52px);
	font-weight: 500;
	line-height: 1.2;
	letter-spacing: -0.01em;
	width: 100%;
	max-width: 100%;
	min-width: 0;
	overflow-wrap: break-word;
}

.ocx-s4__card {
	min-width: 0;
	align-items: stretch;
}

.ocx-s4__card .wp-block-heading {
	font-size: var(--Text-Sizes-Heading-6, 22px);
	font-weight: 500;
	line-height: 1.4;
	letter-spacing: -0.01em;
}

.ocx-s4__card p,
.ocx-s4__bullets {
	font-size: var(--Text-Sizes-Text-Regular, 16px);
	font-weight: 400;
	line-height: 1.5;
}

/*
 * Viñetas del item "Business Impact": el nodo de Figma trae el texto con "\n"
 * entre lineas, pero en el template van como una lista real (`wp:list`). Cada
 * viñeta es un punto ("middle dot") en negrita, centrado verticalmente al
 * medio de la altura de la fuente, en lugar del guion del wireframe.
 *
 * El punto va en `::before` de cada `li` como un flex item de 20px (la misma
 * franja que antes dejaba el `padding-inline-start` del `ul` y que empujaba el
 * texto a x=100). El punto se centra dentro de esa franja con `text-align:
 * center`, asi el espacio que queda a ambos lados del punto (antes y despues)
 * es identico, y el texto de la lista arranca en el mismo x que antes.
 *
 * El `li` usa `align-items: baseline`: el punto se alinea con la linea base de
 * la PRIMERA linea de texto del item, de modo que al envolver en varias lineas
 * el punto queda centrado al medio de la primera letra capitalizada y no en
 * medio de todo el parrafo (que es lo que daria un `align-items: center`).
 *
 * `li::marker` no se usa: el navegador coloca ese marker en su propia caja y
 * no da control fino para que el espacio "antes" iguale al "despues" del
 * punto. Con `::before` + flex el canal es determinista.
 */
.ocx-s4__bullets {
	margin: 0;
	padding: 0;
	list-style: none;
}

.ocx-s4__bullets li {
	display: flex;
	align-items: baseline;
}

.ocx-s4__bullets li::before {
	content: "•";
	font-weight: 700;
	flex: 0 0 20px;
	text-align: center;
	line-height: 1;
}

/*
 * "Row" (#10218:69116): grilla 2x2 de los items (Problem, Solution, Business
 * Impact). Va en CSS igual que la grilla de l19, para que core no genere un
 * `wp-container-*` que pelee por especificidad. `padding: 8px 0` viene del
 * nodo. gap 24 entre celdas.
 */
.ocx-s4__grid {
	display: grid;
	box-sizing: border-box;
	width: 100%;
	min-width: 0;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	grid-template-rows: repeat(2, fit-content(100%));
	gap: 24px;
	padding: 8px 0;
}

/*
 * Imagen placeholder (#10218:67386): 469x500 fija con radius 16. A bajo ancho
 * la imagen fija se mantiene y el Content (flex 1) cede ancho primero.
 */
.ocx-s4__image {
	margin: 0;
	max-width: 100%;
}

.ocx-s4__image img {
	display: block;
	width: 469px;
	max-width: 100%;
	height: 500px;
	aspect-ratio: 106 / 113;
	object-fit: cover;
	border-radius: var(--Radius-Large, 16px);
}

/*
 * Por debajo de 768px la fila imagen + contenido no entra: la imagen fija de 469px
 * mas el `blockGap` de 80px del bloque dejan 11px a `.ocx-s4__content` en un viewport
 * de 600 (560 del container), y el tagline, los H6 y las viñetas se derraman 91px.
 *
 * El corte apila la fila y suelta el alto fijo de la imagen, que solo tiene sentido con
 * la imagen al lado. `overflow-wrap: break-word` queda como red de seguridad: con la
 * columna a una fraccion el `minmax(0, 1fr)` ya parte bien, pero una palabra sola
 * FollowWordNoExistente seguira pidiendo ancho.
 */
@media (max-width: 767.98px) {
	.ocx-s4__component {
		flex-direction: column;
		align-items: stretch;
		gap: 24px;
	}

	.ocx-s4__image img {
		width: 100%;
		height: auto;
	}

	.ocx-s4__content {
		width: 100%;
	}
}

/*
 * "Header / 62 /" (#10218:66749) de la pagina Industries.
 *
 * Es el mismo template de cabecera que el hero del ecosistema (`.ocx-h62__*`),
 * pero esta instancia difiere en dos cosas:
 *
 *  1. No trae tagline: el primer hijo del Component es directamente el
 *     "Section Title" con H1 + parrafo.
 *  2. El tope del Component es `--Max-Width-max-width-large` (768px), no los 896px
 *     fijos de la instancia de Solution.
 *
 * La cadena de centrado es la misma de h62 y viene de los `align-items: center`
 * de Section, Container y Component: cada nivel centra al siguiente, con el
 * `align-self: stretch` de cada hijo anulando el `align-items` del padre para ese
 * item y dejando que sea el nivel interior el que centre.
 */

/*
 * El padding va con los dos tokens del design system y no con literales: es lo
 * mismo que dice el nodo (`112px 64px`) pero asi baja a 64/20 bajo 1200px, que es
 * el comportamiento del resto de la pagina. `.ocx-section--stretch` pone
 * `align-items: stretch` en (0,1,0), asi que el `center` va con `.ocx-section`
 * delante para llegar a (0,2,0).
 */
.ocx-section.ocx-i62__section,
.ocx-section.ocx-l627__section,
.ocx-section.ocx-h64__section,
.ocx-section.ocx-l1__section,
.ocx-section.ocx-t4__section {
	padding: var(--Section-Padding-padding-section-large, 112px) var(--Page-Padding-padding-global, 64px);
}

.ocx-section.ocx-i62__section {
	align-items: center;
}

.ocx-i62__container,
.ocx-l627__container {
	align-self: stretch;
	width: 100%;
	min-width: 0;
	max-width: var(--Container-container-large, 1280px);
}

.ocx-section > .ocx-i62__container,
.ocx-section > .ocx-l627__container {
	margin-inline: auto;
}

/*
 * "Component" (#10218:66751): columna con `align-items: center` y tope de
 * `--Max-Width-max-width-large` (768px). El `align-self: stretch` del nodo pide
 * llenar el Container, pero al recortar con `max-width` la caja queda pegada al
 * inicio de los 1280, asi que el centrado lo hacen los margenes auto de la regla
 * siguiente (mismo truco que `.ocx-h62__title > .ocx-h62__content`).
 */
.ocx-i62__component {
	align-self: stretch;
	width: 100%;
	min-width: 0;
	max-width: var(--Max-Width-max-width-large, 768px);
}

.ocx-section > .ocx-i62__container > .ocx-i62__component {
	margin-inline: auto;
}

/*
 * "Section Title" (#10218:66752) y "Content" (#10218:66755): estiran su ancho
 * para que el texto quede dentro del tope de 768. Sin esto el H1 se encoge a su
 * max-content y el parrafo a su ancho, desalineando el margen.
 */
.ocx-i62__title,
.ocx-i62__content {
	align-self: stretch;
	width: 100%;
	min-width: 0;
}

/*
 * El tipo va con selectores de hijo igual que `.ocx-h62__*`: el copy sigue
 * siendo un bloque core plano. "Heading/H1" (55px) y "Text/Medium/Normal"
 * (18px) declaran `textAlignHorizontal: CENTER`. 55px es el override local del
 * text style, por eso el literal en vez del token (igual que `.ocx-h62__content`).
 */
.ocx-i62__content .wp-block-heading {
	margin: 0;
	font-family: var(--wp--preset--font-family--widescreen);
	font-size: var(--Text-Sizes-Heading-1, 72px);
	font-weight: 500;
	line-height: 1;
	letter-spacing: -0.01em;
	text-align: center;
	color: var(--Color-Scheme-1-Text, #000000);
}

.ocx-i62__content p {
	margin: 0;
	font-family: var(--wp--preset--font-family--widescreen);
	font-size: var(--Text-Sizes-Text-Medium, 18px);
	font-weight: 400;
	line-height: 1.5;
	text-align: center;
	color: var(--Color-Scheme-1-Text, #000000);
}

/*
 * "Actions" (#10218:66758): fila con `align-items: flex-start` y `gap: 16px`.
 *
 * El boton queda centrado no por un `justify-content` propio sino porque la fila
 * es un item del Component (`align-items: center`), que la encoge a su contenido
 * y la centra en los 768 del tope. Por eso el atributo del bloque no lleva
 * `justifyContent`: sobra y ademas anula el ancho de contenido de la fila.
 */
.ocx-i62__actions {
	align-items: flex-start;
	gap: 16px;
}

/*
 * "Layout / 627 /" (#10218:67224) de la pagina Industries: Financial Services.
 *
 * Columna con tagline + H2 y, debajo, una fila de 4 List Items separados por
 * divisores verticales de 1px rgba(0,0,0,0.15). La fila lleva `border-top` de
 * 1px del mismo color (el `strokeWeight: 1px 0px 0px` del nodo). Debajo, el
 * Actions con un boton link "Talk to a X AI Specialist" + chevron.
 *
 * El container es igual al de las otras secciones (1280 centrado).
 */

/*
 * "Section Title" (#10218:67226): columna con `align-items: flex-start`. El
 * tagline y el H2 van a la izquierda sobre el mismo margen; estiran su ancho
 * para que el H2 no se encoe a su max-content.
 */
.ocx-l627__title,
.ocx-l627__content,
.ocx-l627__list {
	align-self: stretch;
	width: 100%;
	min-width: 0;
}

/*
 * El H2 ("Content", #10218:68603): columna con `align-items: flex-start`,
 * `gap: 24px` y `align-self: stretch`, mas un tope de
 * `--Max-Width-max-width-large` (768px).
 *
 * El tope es una decision de diseno que se aparta de Figma: ahi el "Content" es
 * `fill` sin tope, asi que el H2 mide lo mismo que el Container (1280px medidos a
 * 1440). Los seis titulos de la pagina se envuelven a 768.
 *
 * El `stretch` con `max-width` deja la caja pegada al inicio del Container, que es
 * justo lo que se busca: el H2 alinea su margen izquierdo con el tagline de arriba.
 * Por eso no lleva margenes auto (al reves que el "Component" del hero i62, que si
 * va centrado y los necesita).
 */
.ocx-l627__heading {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 24px;
	align-self: stretch;
	width: 100%;
	min-width: 0;
	max-width: var(--Max-Width-max-width-large, 768px);
}

/*
 * El tipo del titulo: tagline "Financial Services" (Heading/Tagline, 16px
 * SemiBold 600, 150% lh) y H2 (52px/500/lh 1.2/ls -0.01em). Todo a la izquierda.
 */
.ocx-l627__tagline,
.ocx-l627__heading .wp-block-heading {
	margin: 0;
	font-family: var(--wp--preset--font-family--widescreen);
	color: var(--Color-Scheme-1-Text, #000000);
	text-align: left;
}

.ocx-l627__tagline {
	font-size: var(--Text-Sizes-Text-Regular, 16px);
	font-weight: 600;
	line-height: 1.5;
}

.ocx-l627__heading .wp-block-heading {
	font-size: var(--Text-Sizes-Heading-2, 52px);
	font-weight: 500;
	line-height: 1.2;
	letter-spacing: -0.01em;
}

/*
 * "Row" (#10218:69129): fila con `gap: 32px` y `border-top: 1px solid
 * rgba(0,0,0,0.15)`. Los 4 items se reparten el ancho y los divisores son las
 * lineas verticales que separan cada par.
 */
.ocx-l627__row {
	display: flex;
	align-items: stretch;
	gap: 32px;
	border-top: 1px solid rgba(0, 0, 0, 0.15);
}

/*
 * "List Item" (#10218:69130): columna con `padding: 32px 0`, `justify-content:
 * center` y `align-items: stretch`, para que el contenido quede pegado a la
 * izquierda y a lo mismo alto que el item.
 */
.ocx-l627__item {
	flex: 1 1 0;
	min-width: 0;
	padding: 32px 0;
	align-items: stretch;
}

/*
 * "Divider" (#10218:69135): IMAGE-SVG con stroke vertical de 1px
 * rgba(0,0,0,0.15). Se pinta de izquierda a derecha con una regla en vez de un
 * divisor, y queda igual de alto que la fila.
 */
.ocx-l627__divider {
	width: 1px;
	align-self: stretch;
	background: rgba(0, 0, 0, 0.15);
}

/*
 * El tipo de los items: H5 (28px/500/lh 1.4/ls -0.01em) y parrafo
 * (Text/Regular/Normal, 16px/400/lh 1.5). El nodo declara "Roboto" en el token
 * pero el resto del sitio usa Manrope (y el editor carga Manrope para el body),
 * asi que se usa Manrope y se reporta la diferencia.
 */
.ocx-l627__item .wp-block-heading {
	margin: 0;
	font-family: var(--wp--preset--font-family--widescreen);
	font-size: var(--Text-Sizes-Heading-5, 28px);
	font-weight: 500;
	line-height: 1.4;
	letter-spacing: -0.01em;
	text-align: left;
	color: var(--Color-Scheme-1-Text, #000000);
}

.ocx-l627__item p {
	margin: 0;
	font-family: var(--wp--preset--font-family--widescreen);
	font-size: var(--Text-Sizes-Text-Regular, 16px);
	font-weight: 400;
	line-height: 1.5;
	text-align: left;
	color: var(--Color-Scheme-1-Text, #000000);
}

/*
 * "Actions" (#10328:1385): fila con `align-items: center` y `gap: 24px`. El
 * boton es un link `ocx-btn--link` (ya existe en `.ocx-btn--link` de la home),
 * con el texto en #B69E52 y el chevron al final.
 */
.ocx-l627__actions {
	gap: 24px;
}

/*
 * `min-width: 0` en el contenido de cada item: sin esto una palabra larga (o
 * el ancho min-content de la caja flex) empuja el item por encima de la cuota
 * que le toca en la fila.
 */
.ocx-l627__item-content {
	min-width: 0;
}

@media (max-width: 767.98px) {
	/*
	 * Mobile de "Layout / 627 /": Figma no define frame movil para este bloque, asi
	 * que se decide por comportamiento. A 4 columnas con 3 divisores y 32px de gap
	 * entre cada hijo, a 390px cada item quedaba en ~17px de ancho y el texto
	 * desbordaba el viewport (14px de overflow). La fila se apila a una columna,
	 * los items dejan de repartirse (`flex: none`) y cada uno conserva su
	 * `padding: 32px 0`.
	 *
	 * Los divisores giran: en columna un trait vertical de 1px entre items apilados
	 * no separa nada visible, asi que pasan a ser reglas horizontales de 1px que
	 * cumplen el mismo papel de separador entre bloques.
	 */
	.ocx-l627__row {
		flex-direction: column;
		gap: 0;
	}

	.ocx-l627__item {
		flex: none;
		width: 100%;
	}

	.ocx-l627__divider {
		width: 100%;
		height: 1px;
		align-self: auto;
	}
}

/*
 * "Insights" (#10395:1022) de la pagina Insights.
 *
 * La pagina reusa el hero `Header / 62 /` (`.ocx-i62__*`) y el footer comunes, y anade
 * dos bloques propios:
 *
 *   - `.ocx-ins__filter*`: los chips "Client perspective / Blog / Newsroom" del hero.
 *   - `.ocx-ins__*`: la seccion de interview (una por testimonio).
 *
 * El interview es una variante del `Layout / 627 /` de Industries, no el mismo bloque: en
 * vez de una fila de 4 columnas con divisores verticales, es un encabezado de dos columnas
 * (retrato + titulo) seguido de una lista apilada de preguntas y respuestas con reglas
 * horizontales de 1px y el nombre del interlocutor en H5.
 */

.ocx-section.ocx-ins__section {
	padding: var(--Section-Padding-padding-section-large, 112px) var(--Page-Padding-padding-global, 64px);
}

.ocx-ins__container {
	align-self: stretch;
	width: 100%;
	min-width: 0;
	max-width: var(--Container-container-large, 1280px);
}

.ocx-section > .ocx-ins__container {
	margin-inline: auto;
}

/*
 * El Container es una columna de WordPress, y core le deja `align-items: flex-start`, asi
 * que sus hijos se miden a su hug en vez de llenar los 1280. Sin esto el encabezado se
 * encoge al titulo mas corto de cada entrevista y el Q&A depende de lo largo del texto.
 * Es el mismo workaround que llevan `.ocx-l627__title` y `.ocx-l627__list`.
 */
.ocx-ins__header,
.ocx-ins__qa {
	align-self: stretch;
	width: 100%;
	min-width: 0;
}

/*
 * "Filters" (#10395:5517): fila `hug` con `align-items: center`, hermana del Container del
 * hero. Como la seccion del hero es `align-items: center`, la fila queda centrada; los
 * chips se alinean a la izquierda dentro de la fila.
 */
.ocx-ins__filters {
	flex-direction: row;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px;
}

/*
 * Cada chip: columna con `padding: 10px 16px` y `gap: 8px`, sin fondo ni borde. Figma
 * marca el chip activo con subrayado (`{ts3}`) en vez de con un fondo.
 *
 * Los estilos van sobre `.wp-block-button__link` y no sobre el `div.wp-block-button` que
 * genera el bloque: el texto vive en el link de adentro, que trae `background-color`,
 * `padding` y `font-family` propios de core. Poner la tipografia en el div no hacia nada
 * (medido: renderizaba Roboto, fondo blanco y sin subrayado). Es la misma convencion que
 * usa `.wp-block-button.ocx-btn--link`.
 */
.wp-block-button.ocx-ins__filter {
	padding: 0;
}

.wp-block-button.ocx-ins__filter .wp-block-button__link {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	padding: 10px 16px;
	font-family: var(--wp--preset--font-family--widescreen);
	font-size: var(--Text-Sizes-Text-Regular, 16px);
	font-style: normal;
	font-weight: 400;
	line-height: 150%;
	color: var(--Color-Scheme-1-Text, #000);
	background: none;
	border: 0;
	border-radius: 0;
	cursor: pointer;
}

/*
 * El subrayado es la senal de la ventana activa, asi que solo lo lleva la que esta
 * seleccionada. "Blog" y "Newsroom" quedan sin rayar en reposo, y tampoco lo toman al pasar
 * el mouse: si underlines al hover, el subrayado deja de distinguir la activa.
 */
.wp-block-button.ocx-ins__filter .wp-block-button__link[aria-pressed="true"] {
	text-decoration-line: underline;
	text-decoration-style: solid;
	text-decoration-skip-ink: none;
	text-decoration-thickness: auto;
	text-underline-offset: auto;
	text-underline-position: from-font;
}

.wp-block-button.ocx-ins__filter .wp-block-button__link[aria-pressed="false"] {
	text-decoration-line: none;
}

/*
 * "Section Title" (#10395:10313): el nodo es `mode: none` con los hijos posicionados a
 * mano (retrato en 0,0 y texto en 252,0), asi que se reconstruye como fila.
 *
 * El `padding-left: 40px` del texto viene del nodo "Section Title" (#10408:632), que lo
 * declara explicito; el hueco de 16px entre el retrato y ese padding es el `gap` de la
 * fila, con lo que el texto arranca en 252 + 40 = 292, igual que en Figma.
 */
.ocx-ins__header {
	flex-direction: row;
	flex-wrap: nowrap;
	align-items: flex-start;
	gap: 16px;
}

/* El retrato: 236x252 fijos con radio 16, como el nodo. */
.ocx-ins__portrait {
	flex: 0 0 236px;
	width: 236px;
	height: 252px;
	border-radius: 16px;
	overflow: hidden;
}

.ocx-ins__portrait img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

/*
 * El texto del encabezado: `width: 545px` es el ancho fijo del nodo "Section Title"
 * (#10408:632, `dimensions: {width: 545}`), con el `padding-left: 40px` que el mismo nodo
 * declara explicito, asi que el texto corre a 236 + 16 + 40 = 292 como en Figma.
 *
 * El `max-width` de 768 no hace nada con el ancho de 545 al lado, pero queda como red de
 * seguridad para cuando se edite el ancho desde el Site Editor. El `max-width: 100%` de
 * abajo si hace falta: sin el, el item se mide a sus 545 fijos y desborda a 390, donde la
 * fila ya no es fila.
 *
 * No lleva `flex: 1 1 auto` a proposito: con `flex-grow: 1` el `width: 545px` se ignora y
 * el titulo se estira hasta llenar los 1280, que es justo lo que se quiere evitar.
 */
.ocx-ins__heading {
	display: flex;
	width: 545px;
	max-width: min(100%, var(--Max-Width-max-width-large, 768px));
	padding-left: 40px;
	flex-direction: column;
	align-items: flex-start;
	gap: 16px;
}

/*
 * "Tagline Wrapper" (#10408:633): el texto "Interview" con Heading/Tagline (16px/600), y
 * "Content" (#10408:635) con el H2 (52px/500/lh 1.2/ls -0.01em). Los dos a la izquierda.
 */
.ocx-ins__tagline,
.ocx-ins__heading .wp-block-heading {
	margin: 0;
	font-family: var(--wp--preset--font-family--widescreen);
	color: var(--Color-Scheme-1-Text, #000000);
	text-align: left;
}

.ocx-ins__tagline {
	font-size: var(--Text-Sizes-Text-Regular, 16px);
	font-weight: 600;
	line-height: 1.5;
}

.ocx-ins__heading .wp-block-heading {
	font-size: var(--Text-Sizes-Heading-2, 52px);
	font-weight: 500;
	line-height: 1.2;
	letter-spacing: -0.01em;
}

/*
 * "Row" (#10395:10320): columna con `gap: 10px` y `border-top` de 1px (el
 * `strokeWeight: 1px 0px 0px` del nodo), que es la misma linea que usan los 627.
 */
.ocx-ins__qa {
	display: flex;
	flex-direction: column;
	align-items: stretch;
	gap: 10px;
	border-top: 1px solid rgba(0, 0, 0, 0.15);
	padding-top: 10px;
}

/*
 * "List Item" (#10395:10321): columna con `padding: 10px 0` y `gap: 24px`; "Content"
 * (#10395:10322) con `gap: 16px`. El label del interlocutor ("OpenCX:", "Dimitrios:",
 * "Catalina:") es Heading/H5 y la respuesta es Text/Regular/Normal.
 */
.ocx-ins__qa-item {
	display: flex;
	flex-direction: column;
	align-items: stretch;
	gap: 24px;
	padding: 10px 0;
}

.ocx-ins__qa-content {
	display: flex;
	flex-direction: column;
	align-items: stretch;
	gap: 16px;
}

.ocx-ins__qa-label {
	margin: 0;
	font-family: var(--wp--preset--font-family--widescreen);
	font-size: var(--Text-Sizes-Heading-5, 28px);
	font-weight: 500;
	line-height: 1.4;
	letter-spacing: -0.01em;
	color: var(--Color-Scheme-1-Text, #000000);
}

.ocx-ins__qa-text {
	margin: 0;
	font-family: var(--wp--preset--font-family--widescreen);
	font-size: var(--Text-Sizes-Text-Regular, 16px);
	font-weight: 400;
	line-height: 1.5;
	color: var(--Color-Scheme-1-Text, #000000);
}

/*
 * Los divisores son reglas horizontales de 1px (los nodos son SVG de 1184x2 con trazo de
 * 1px centrado). Van como `border-bottom` del item en vez de como elemento aparte: el
 * ultimo item de cada entrevista se queda sin linea, que es justo lo que pasa en Figma.
 */
.ocx-ins__qa-item:not(:last-child) {
	border-bottom: 1px solid rgba(0, 0, 0, 0.15);
	padding-bottom: 20px;
	margin-bottom: 10px;
}

/*
 * Mobile: el retrato y el titulo se apilan, y el `padding-left` de 40px del texto dejaria
 * un margen sin sentido sin el retrato al lado. El H2 baja al tamano de los otros titulos
 * de la pagina, que es lo que hace el bloque `ocx-l627__heading` en el mismo breakpoint.
 */
@media (max-width: 767.98px) {
	.ocx-ins__header {
		flex-direction: column;
		gap: 24px;
	}

	.ocx-ins__portrait {
		flex: none;
		width: 100%;
		height: auto;
		aspect-ratio: 236 / 252;
	}

	.ocx-ins__heading {
		width: 100%;
		padding-left: 0;
	}

	.ocx-ins__heading .wp-block-heading {
		font-size: var(--Text-Sizes-Heading-4, 32px);
	}

	.ocx-ins__qa-label {
		font-size: var(--Text-Sizes-Text-Medium, 18px);
	}
}

/* ============================================================================
 * PAGINA ABOUT
 *
 * El rediseño "About • Desktop" (#12852:1493) vive al final de esta seccion,
 * con un prefijo por nodo (`ocx-about-hero`, `ocx-about-vision`, `ocx-about-team`,
 * `ocx-about-why`, `ocx-about-cta`). El unico codigo reusado es el que comparte
 * el MISMO nodo de Figma: los tres `Textured Divider` (`.ocx-textured-divider`)
 * y el `CTA Solution` (`.ocx-solaas-cta__*`), este ultimo con un modificador
 * `ocx-about-cta__heading` porque About pide Widescreen donde Solution pide
 * Manrope en el mismo H2.
 *
 * Lo que sigue es el codigo de la version anterior de la pagina. `.ocx-h64__*`
 * sigue vivo porque la pagina Contact lo reusa via `.ocx-h64--center`;
 * `.ocx-l1__*` y `.ocx-t4__*` quedaron sin markup que los use (son candidatos a
 * borrar) y se mantienen hasta cerrar el resto del sitio.
 *
 * Se mantiene el criterio del archivo de un prefijo por nodo de Figma, sin compartir
 * declarations entre paginas: `patterns.css` es global, asi que un prefijo compartido
 * cruzaria las paginas y las ataria a la misma evolucion.
 * --------------------------------------------------------------------------- */

/*
 * Figma "Header / 64 /" (#10218:66720), el hero de About.
 *
 * A diferencia de los heroes `.ocx-i62__*` (centrados, sin parrafo) este es una
 * columna a la izquierda con H1 y parrafo, y el bloque de texto tiene ancho FIJO de
 * 904 (`sizing.horizontal: fixed, dimensions.width: 904`), o sea que NO llena el
 * Container: en flexbox `align-items: stretch` solo aplica cuando el ancho cruzado es
 * `auto`, asi que el `width: 904px` basta para que quede de 904 pegado a la izquierda
 * sin needing un `align-self`.
 *
 * El `max-width: 100%` es la red de seguridad para anchos menores a 904, donde un ancho
 * fijo se saldria de la caja.
 */
.ocx-section.ocx-h64__section {
	/*
	 * El padding **no** va aca: se resuelve con los tokens en la regla compartida de
	 * `.ocx-section.ocx-i62__section, .ocx-l627__section, …`, arriba. Con `112px 64px`
	 * duros la seccion se comia 64px de cada lado en mobile y a 390 el contenido quedaba
	 * en 262px en vez de 350, con el H1 ("intelligence" no parte) desbordando 7px.
	 *
	 * Este bloque queda solo para los dos valores que difieren del nodo: el padding
	 * inferior en 0 y el `gap` de la seccion.
	 */
	padding-bottom: 0;

	/* Inerte: la seccion tiene un solo hijo. Se declara para reflejar la estructura. */
	gap: 80px;
	align-items: stretch;
}

.ocx-h64__container {
	align-self: stretch;
	width: 100%;
	min-width: 0;

	/*
	 * `align-items: stretch` explicito porque core emite `align-items: flex-start` en los
	 * grupos con `orientation: vertical`, y con flex-start el Component se encoge.
	 */
	align-items: stretch;

	/* Inerte: un solo hijo. */
	gap: 80px;
}

.ocx-h64__component {
	width: 904px;
	max-width: 100%;
	align-items: stretch;
	gap: 24px;
}

.ocx-h64__title,
.ocx-h64__lead {
	margin: 0;
	font-family: var(--wp--preset--font-family--widescreen);
	text-align: left;
	color: var(--Color-Scheme-1-Text, #000000);
}

/* Heading/H1: 55px, weight 500, line-height 1em, letter-spacing -0.01em. */
.ocx-h64__title {
	font-size: var(--Text-Sizes-Heading-1, 72px);
	font-weight: 500;
	line-height: 1;
	letter-spacing: -0.01em;
}

/* Text/Medium/Normal: 18px, weight 400, line-height 150%. */
.ocx-h64__lead {
	font-size: var(--Text-Sizes-Text-Medium, 18px);
	font-weight: 400;
	line-height: 1.5;
}

/*
 * Figma "Layout / 1 /" (#10218:67569 "Human-led AI Philosophy" y #10218:71656
 * "Why OpenCX"), dos veces en la pagina.
 *
 * Es el MISMO nodo de layout que `.ocx-l210__*` (#10218:68751) de la home, con las
 * columnas invertidas: alla imagen izquierda / texto derecha, aca texto izquierda /
 * imagen derecha. Misma geometria (fila, `gap: 80px`, `align-items: center`, imagen de
 * 640 de alto con radio 16), asi que las declaraciones son las mismas y cambia el orden
 * del DOM, que es el que decide el lado visual. El orden del DOM se deja texto-primero
 * a proposito: si se invirtiera con `row-reverse` para reusar `l210`, el HTML pondria la
 * imagen antes del texto y se perderia el orden de lectura.
 *
 * Las dos mitades son `sizing.horizontal: fill` en Figma, que no tiene equivalente en
 * flexbox, asi que la fila reparte con `flex: 1 1 0` en las dos. A 1440 eso da
 * (1312 - 80) / 2 = 616 para cada una, que es el ancho nativo del PNG.
 */
.ocx-section.ocx-l1__section {
	/* El padding va por tokens en la regla compartida de `.ocx-i62__section`. */
	gap: 80px;
	align-items: stretch;
}

.ocx-l1__container {
	align-self: stretch;
	width: 100%;
	min-width: 0;
	align-items: stretch;
	gap: 80px;
}

/*
 * `min-height` y no `height`: el nodo dice `sizing.vertical: fixed, dimensions.height:
 * 640`, pero con altura fija la columna de texto se sale de la fila en cuanto la copy
 * envuelve a mas lineas (a 768 la mitad mide 324 y el H2 de 52px pasa a 5 lineas). Con
 * `min-height` la fila mide 640 mientras el texto entre, que es el `max(640, alto del
 * texto)` que hace Figma, y a 1440 el texto mide ~330 asi que la fila lands en 640
 * exactos, igual que el diseno.
 */
.ocx-l1__component {
	flex-direction: row;
	align-items: center;
	gap: 80px;
	width: 100%;
	min-width: 0;
	min-height: 640px;
}

.ocx-l1__text {
	flex: 1 1 0;
	min-width: 0;
	align-items: stretch;
	gap: 32px;
}

.ocx-l1__media {
	flex: 1 1 0;
	min-width: 0;
	align-items: stretch;
}

/* El `figure` de core trae margin-bottom propio; el radio va en el `img`. */
.ocx-l1__image {
	margin: 0;
	align-self: stretch;
	width: 100%;
}

.ocx-l1__image img {
	width: 100%;
	height: 640px;
	object-fit: cover;
	border-radius: 16px;
	display: block;
}

/* "Section Title" (#10218:67573): columna, `gap: 16px`, con el tagline arriba. */
.ocx-l1__title {
	align-self: stretch;
	width: 100%;
	min-width: 0;
	align-items: stretch;
	gap: 16px;
}

/* "Content" (#10218:67576): columna, `gap: 24px`, con el H2 y el parrafo. */
.ocx-l1__body {
	align-self: stretch;
	width: 100%;
	min-width: 0;
	align-items: stretch;
	gap: 24px;
}

.ocx-l1__tagline,
.ocx-l1__heading,
.ocx-l1__lead {
	margin: 0;
	font-family: var(--wp--preset--font-family--widescreen);
	text-align: left;
	color: var(--Color-Scheme-1-Text, #000000);
}

/* Heading/Tagline: 16px, weight 600, line-height 150%. */
.ocx-l1__tagline {
	font-size: var(--Text-Sizes-Text-Regular, 16px);
	font-weight: 600;
	line-height: 1.5;
}

/*
 * Heading/H2: 52px, weight 500, line-height 1.2, letter-spacing -0.01em, con el tope de
 * 768 que viene de la convencion de la pagina (lo mismo que `.ocx-l627__heading`). Aca el
 * tope casi nunca muerde: la columna mide 616 a 1440, asi que el limite real es el de la
 * mitad de la fila. Queda declarado para que el H2 no crezca si la copia se ensancha.
 */
.ocx-l1__heading {
	font-size: var(--Text-Sizes-Heading-2, 52px);
	font-weight: 500;
	line-height: 1.2;
	letter-spacing: -0.01em;
	max-width: var(--Max-Width-max-width-large, 768px);
}

/* Text/Medium/Normal: 18px, weight 400, line-height 150%. */
.ocx-l1__lead {
	font-size: var(--Text-Sizes-Text-Medium, 18px);
	font-weight: 400;
	line-height: 1.5;
}

/*
 * Figma "Team / 4 /" (#10218:68001).
 *
 * Seccion con el "Section Title" (tagline + H2 + parrafo) y debajo una fila de 4 cards.
 * El `Content` intermedio (#10218:68009, `gap: 64px`) tiene un solo hijo, asi que su gap
 * es inerte y se omite el wrapper: el HTML queda con un nivel menos y el editor muestra
 * la fila de cards directo.
 *
 * La fila de cards es `flex-wrap` con `flex: 1 1 0`, que reparte en 4 columnas iguales a
 * 1440: (1280 - 3 * 32) / 4 = 296, que es exactamente el ancho de la imagen segun el
 * nodo, asi que la foto queda cuadrada.
 */
.ocx-section.ocx-t4__section {
	/* El padding va por tokens en la regla compartida de `.ocx-i62__section`. */
	gap: 80px;
	align-items: stretch;
}

.ocx-t4__container {
	align-self: stretch;
	width: 100%;
	min-width: 0;
	align-items: stretch;
	gap: 80px;
}

.ocx-t4__title {
	align-self: stretch;
	width: 100%;
	min-width: 0;
	align-items: stretch;
	gap: 16px;
}

.ocx-t4__body {
	align-self: stretch;
	width: 100%;
	min-width: 0;
	align-items: stretch;
	gap: 24px;
}

.ocx-t4__tagline,
.ocx-t4__heading,
.ocx-t4__lead {
	margin: 0;
	font-family: var(--wp--preset--font-family--widescreen);
	text-align: left;
	color: var(--Color-Scheme-1-Text, #000000);
}

.ocx-t4__tagline {
	font-size: var(--Text-Sizes-Text-Regular, 16px);
	font-weight: 600;
	line-height: 1.5;
}

/* H2 con el tope de 768, igual que en Industries y en la pagina Insights. */
.ocx-t4__heading {
	font-size: var(--Text-Sizes-Heading-2, 52px);
	font-weight: 500;
	line-height: 1.2;
	letter-spacing: -0.01em;
	max-width: var(--Max-Width-max-width-large, 768px);
}

.ocx-t4__lead {
	font-size: var(--Text-Sizes-Text-Medium, 18px);
	font-weight: 400;
	line-height: 1.5;
}

.ocx-t4__row {
	display: flex;
	flex-wrap: wrap;
	gap: 32px;
	width: 100%;
	min-width: 0;
}

/* Card (#10218:72002): columna con `gap: 24px` entre foto, cuerpo e iconos. */
.ocx-t4__card {
	flex: 1 1 0;
	min-width: 0;
	align-items: stretch;
	gap: 24px;
}

.ocx-t4__figure {
	margin: 0;
	width: 100%;
}

/*
 * La imagen es `sizing.vertical: fixed, dimensions.height: 296` con el ancho en `fill`.
 * Se declara con `aspect-ratio: 1` en vez de `height: 296px` fijo para que no se
 * deforme cuando la fila pasa a 2 columnas: a 1440 da 296x296 exactos, que es lo que
 * dice el nodo, y en 2 columnas la foto sigue siendo cuadrada en vez de recortada.
 */
.ocx-t4__figure img {
	width: 100%;
	height: auto;
	aspect-ratio: 1;
	object-fit: cover;
	border-radius: 16px;
	display: block;
}

.ocx-t4__card-body {
	align-items: stretch;
	gap: 16px;
}

/*
 * "Title" (#10218:72005): columna SIN `gap` en Figma, o sea que el nombre y el rol van
 * pegados. Se respeta con `gap: 0`.
 */
.ocx-t4__name,
.ocx-t4__role,
.ocx-t4__bio {
	margin: 0;
	font-family: var(--wp--preset--font-family--widescreen);
	text-align: left;
	color: var(--Color-Scheme-1-Text, #000000);
}

.ocx-t4__name {
	font-size: var(--Text-Sizes-Text-Large, 22px);
	font-weight: 600;
	line-height: 1.5;
}

.ocx-t4__role {
	font-size: var(--Text-Sizes-Text-Medium, 18px);
	font-weight: 400;
	line-height: 1.5;
}

.ocx-t4__bio {
	font-size: var(--Text-Sizes-Text-Regular, 16px);
	font-weight: 400;
	line-height: 1.5;
}

/* "Social Icons" (#10218:72009): fila con `gap: 14px` y un LinkedIn de 24x24. */
.ocx-t4__social {
	align-items: center;
	gap: 14px;
}

.ocx-t4__social img {
	width: 24px;
	height: 24px;
	flex: 0 0 auto;
	display: block;
}

/*
 * Responsive de las cards. Figma no trae frame de mobile para About, asi que los cortes
 * son una decision propia: 4 columnas en desktop, 2 en tablet y 1 en phone. El
 * `gap: 32px` se mantiene y el ancho de cada card se recalcula con `calc` para que las
 * dos columnas de tablet repartan el espacio parejo.
 */
@media (max-width: 1199.98px) {
	.ocx-t4__card {
		flex: 1 1 calc(50% - 16px);
	}
}

@media (max-width: 767.98px) {
	/* La "Layout / 1 /" se apila y la imagen deja de tener alto fijo. */
	.ocx-l1__component {
		flex-direction: column;
		align-items: stretch;
		gap: 40px;
		min-height: 0;
	}

	.ocx-l1__text,
	.ocx-l1__media {
		flex: none;
		width: 100%;
	}

	.ocx-l1__image img {
		height: auto;
		aspect-ratio: 616 / 640;
	}

	.ocx-t4__card {
		flex: 1 1 100%;
	}
}

/* ==========================================================================
 * PAGINA ABOUT — rediseño Figma "About • Desktop" #12852:1493
 *
 * Cinco prefijos, uno por nodo:
 *
 *   ocx-about-hero   #12852:1495  cuadrado hairline + container navy, grid 1.5/1
 *   ocx-about-vision #12852:1509  container blanco con borde cyan, dos boxes
 *   ocx-about-team   #12852:1519  Section Title + 2 containers de 3 cards
 *   ocx-about-why    #12852:1602  cuadrado hairline + box con doble borde
 *   ocx-about-cta    #12852:1613  modificador sobre .ocx-solaas-cta__*
 *
 * Reglas que comparten TODAS las secciones de la pagina: `.ocx-section` trae
 * `padding: 80px 64px` y `background: #fff`, y ninguno de los cinco nodos usa
 * ese par, asi que cada uno lo anula en su propia regla de seccion.
 * ========================================================================== */

/*
 * Header. El navbar de About es #F8F6F0 en Figma, igual que el home, mientras
 * que ecosystem/solution/industries son #FCFBF9 (patterns.css:471 y la copia
 * mobile de patterns.css:10800). La clase doble lleva la especificidad a (0,2,0)
 * para ganarle a las dos sin depender del orden en el archivo.
 */
.ocx-header--ecosystem.ocx-header--about {
	background-color: var(--Color-OpenCX-Dune-Lightest, #F8F6F0) !important;
}

/* --------------------------------------------------------------------------
   Hero - About MTP (#12852:1495)
   -------------------------------------------------------------------------- */
.ocx-section.ocx-about-hero__section {
	padding: 0 80px;
	background: var(--Color-OpenCX-Dune-Lightest, #F8F6F0);
}

/*
 * `#12852:1496` (borde cyan) y `#12852:1497` (container navy) son dos cajas de
 * 1280x713 superpuestas en Figma. Aplanadas, el cuadrado es el wrapper y el
 * container es su contenido: con `border` de 0.5px la diferencia es media píxel.
 */
.ocx-about-hero__outer {
	position: relative;
	display: flex;
	width: 100%;
	max-width: var(--Container-container-large, 1280px);
	min-height: 713px;
	margin: 0 auto;
	box-sizing: border-box;
	background: #e5edf0;
	border: var(--Stroke-Hairline, 0.5px) solid #00c9c9;
}

.ocx-about-hero__container {
	flex: 1 1 auto;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: stretch;
	box-sizing: border-box;
	margin: -1px;
	width: calc(100% + 2px);
	padding: 80px;
	background-color: #1c495a;
	background-image: url("../images/about-hero.webp");
	background-repeat: no-repeat;
	background-position: center right;
	background-size: cover;
	border: var(--Stroke-Hairline, 0.5px) solid #cbbb85;
	border-radius: var(--Radius-Medium, 20px);
	overflow: hidden;
}

/* `#12852:1498`: grid `minmax(0, 1.5fr) minmax(0, 1fr)` con gap 33. */
.ocx-about-hero__card {
	display: grid;
	grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr);
	gap: 33px;
	border-radius: var(--Radius-Large, 16px);
}

/* `#12852:1499`: columna de texto, gap 48 entre Content y Actions. */
.ocx-about-hero__col-text {
	display: flex;
	flex-direction: column;
	gap: 48px;
	min-width: 0;
}

/* `#12852:1500` (Content): gap 24 entre H1 y parrafo. */
.ocx-about-hero__content {
	display: flex;
	flex-direction: column;
	gap: 24px;
}

/*
 * `#12852:1501`, estilo "Heading/H1 (12599:90510)": 55px / 1em / -0.01em.
 * El base del texto es Manrope pero los dos runs (`ts3` y `ts4`) sobre-escriben
 * la familia a Widescreen, asi que el H1 efectivo es Widescreen 400.
 */
.ocx-about-hero__heading {
	margin: 0;
	font-family: var(--wp--preset--font-family--widescreen, "widescreen", sans-serif);
	font-weight: 400;
	font-size: 55px;
	line-height: 1em;
	letter-spacing: -0.01em;
	color: #e8ecee;
}

/*
 * `ts4`: "Widescreen Ex Regular", -0.03em, #00C9C9. El corte Ex esta cargado
 * (fonts.css:41-53, `--wp--preset--font-family--widescreen-ex`).
 */
.ocx-about-hero__heading-accent {
	font-family: var(--wp--preset--font-family--widescreen-ex, "widescreen-ex", "widescreen", sans-serif);
	letter-spacing: -0.03em;
	color: #00c9c9;
}

/* `#12852:1502`, estilo "Text/Medium/Normal (115:3264)" con fill #E8ECEE. */
.ocx-about-hero__lead {
	margin: 0;
	font-family: var(--wp--preset--font-family--widescreen, "widescreen", sans-serif);
	font-weight: 300;
	font-size: 18px;
	line-height: 1.5;
	color: #e8ecee;
}

/* `#12852:1503` (Actions): fila con gap 16. */
.ocx-about-hero__actions {
	display: flex;
	gap: 16px;
}

/*
 * `#12852:1504`: Button transparente con stroke 1px #CBBB85 y label #CBBB85 en
 * "Text/Regular/Normal". No hay variante Tertiary en el design system, asi que
 * la caja vive en el prefijo de la pagina.
 */
.ocx-about-hero__btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	box-sizing: border-box;
	padding: 10px 24px;
	background: transparent;
	color: #cbbb85;
	border: 1px solid #cbbb85;
	border-radius: 0;
	font-family: var(--wp--preset--font-family--widescreen, "widescreen", sans-serif);
	font-weight: 400;
	font-size: 16px;
	line-height: 1.5;
	text-decoration: none;
	cursor: pointer;
	transition: background-color 0.2s ease, color 0.2s ease;
}

.ocx-about-hero__btn:hover {
	background-color: #cbbb85;
	color: #1c495a;
	text-decoration: none;
}

/*
 * `#12852:1505` centra `#12852:1506` (418px) y en su interior la imagen de
 * 332x457. El `max-width` es la red de seguridad cuando la columna de la
 * derecha baja de 418.
 */
.ocx-about-hero__col-media {
	display: flex;
	align-items: center;
	justify-content: center;
	min-width: 0;
}

.ocx-about-hero__media {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 24px;
	width: 418px;
	max-width: 100%;
}

/*
 * `#12852:1507`: 332x457 con `scaleMode: FIT` (`object-fit: contain`). La
 * imagen intrínseca mide 809x1115, que es la misma relación, asi que basta
 * con el ancho y `height: auto` (457.3px, redondeado a 457 por Figma).
 */
.ocx-about-hero__image {
	display: block;
	width: 332px;
	max-width: 100%;
	height: auto;
	object-fit: contain;
}

/* --------------------------------------------------------------------------
   Vision (#12852:1509)
   -------------------------------------------------------------------------- */
.ocx-section.ocx-about-vision__section {
	padding: 0 var(--Section-Padding-padding-section-medium, 80px);
	background: var(--Color-OpenCX-Dune-Lightest, #F8F6F0);
}

/* `#12852:1510`: 1280 fijos, canvas #F8F6F0, stroke #00C9C9 0.5px. */
.ocx-about-vision__container {
	width: 100%;
	max-width: var(--Container-container-large, 1280px);
	margin: 0 auto;
	box-sizing: border-box;
	background: var(--Color-OpenCX-Dune-Lightest, #f8f6f0);
	border: var(--Stroke-Hairline, 0.5px) solid #00c9c9;
}

/*
 * `#12852:1511`: fila con `gap: -1px`, que CSS no admite. El -1px de Figma es
 * para que los dos borders de 0.5px se pisen en la junta, asi que el equivalente
 * es `gap: 0` mas `margin-left: -1px` en la columna derecha: 495 + 619 - 1 =
 * 1113, que es el ancho que ocupa el par en Figma.
 *
 * Los `flex: <peso> 1 0` con `max-width` reproducen el reparto 495/619 a 1440
 * (los 7px de holgura en los 1120 del Component quedan centrados) y encogen en
 * proporcion por debajo en vez de desbordar.
 */
.ocx-about-vision__component {
	display: flex;
	justify-content: center;
	align-items: stretch;
	gap: 0;
	box-sizing: border-box;
	width: 100%;
	padding: 0 80px;
}

/*
 * `#12852:1512` + `EL-e97781d1`: la columna aplana el padding de 48px de su
 * unico hijo. fill #F8F6F0, stroke #CBBB85 0.5px, radius 20.
 */
.ocx-about-vision__col-left {
	flex: 495 1 0;
	max-width: 495px;
	display: flex;
	flex-direction: column;
	gap: 16px;
	box-sizing: border-box;
	padding: 48px;
	background: var(--Color-OpenCX-Dune-Lightest, #f8f6f0);
	border: var(--Stroke-Hairline, 0.5px) solid #cbbb85;
	border-radius: var(--Radius-Medium, 20px);
}

/* `#12852:1514`, estilo "Heading/H3": Widescreen 44 / 1.2 / -0.01em, fill #B69E52. */
.ocx-about-vision__heading {
	margin: 0;
	font-family: var(--wp--preset--font-family--widescreen, "widescreen", sans-serif);
	font-weight: 400;
	font-size: 44px;
	line-height: 1.2;
	letter-spacing: -0.01em;
	color: #b69e52;
}

/* `#12852:1515` + `EL-6b5bc094`: padding 48 y `justify-content: flex-end`. */
.ocx-about-vision__col-right {
	flex: 619 1 0;
	max-width: 619px;
	margin-left: -1px;
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	gap: 32px;
	box-sizing: border-box;
	padding: 48px;
	background: var(--Color-OpenCX-Dune-Lightest, #f8f6f0);
	border: var(--Stroke-Hairline, 0.5px) solid #cbbb85;
	border-radius: var(--Radius-Medium, 20px);
}

.ocx-about-vision__body {
	display: block;
}

/* `#12852:1517`, estilo "Text/Medium/Normal (115:3264)", fill #162227. */
.ocx-about-vision__lead {
	margin: 0;
	font-family: var(--wp--preset--font-family--widescreen, "widescreen", sans-serif);
	font-weight: 300;
	font-size: 18px;
	line-height: 1.5;
	color: #162227;
}

/* --------------------------------------------------------------------------
   We are OpenCX (#12852:1519)
   -------------------------------------------------------------------------- */
/*
 * `#12852:1519` es `vertical: fixed` con height 2157. Como la suma de los hijos
 * depende de cuantas lineas tomen los textos, va como `min-height`: la seccion
 * mide lo mismo que en Figma si el contenido entra, y crece si no.
 */
.ocx-section.ocx-about-team__section {
	padding: 0 var(--Section-Padding-padding-section-medium, 80px);
	background: var(--Color-OpenCX-Dune-Lightest, #F8F6F0);
}

/*
 * `EL-c0f728d4` (containers de cards): padding 80, fill #FCFBF9 y stroke
 * `0px 0.5px 0.5px` — sin borde arriba, para que la junta con el container de
 * arriba no duplique el hairline.
 */
.ocx-about-team__container {
	box-sizing: border-box;
	width: 100%;
	max-width: var(--Container-container-large, 1280px);
	margin: 0 auto;
	padding: var(--Section-Padding-padding-section-medium, 80px);
	background: var(--Color-OpenCX-Dune-Lightest, #f8f6f0);
	border: var(--Stroke-Hairline, 0.5px) solid #00c9c9;
	border-top: 0;
}

/*
 * `#12852:1520` (container del titulo): stroke completo de 0.5px, padding
 * `80px 80px 10px` y sin fill — el #F8F6F0 de la seccion se ve por debajo.
 *
 * El nodo trae un `Content` de 768px vacio colgando de un `gap: 24` que
 * como tiene un solo hijo no suma nada, asi que no se replica.
 */
.ocx-about-team__container--title {
	width: 100%;
	max-width: var(--Container-container-large, 1280px);
	margin: 0 auto;
	padding: var(--Section-Padding-padding-section-medium, 80px) var(--Section-Padding-padding-section-medium, 80px) 0;
	background: transparent;
	border: var(--Stroke-Hairline, 0.5px) solid #00c9c9;
}

/* `EL-f6efe3b4` (Section Title): gap 16 entre tagline y Content. */
.ocx-about-team__title {
	display: flex;
	flex-direction: column;
	gap: 16px;
}

.ocx-about-team__tagline {
	display: flex;
	align-items: center;
	gap: 8px;
}

.ocx-about-team__bracket {
	display: block;
	flex: 0 0 auto;
	width: 24px;
	height: 24px;
}

/* `#12852:1523`, estilo "Heading/Tagline", fill #00C9C9. */
.ocx-about-team__tagline-text {
	font-family: var(--wp--preset--font-family--widescreen, "widescreen", sans-serif);
	font-weight: 400;
	font-size: 22px;
	line-height: 1.5;
	color: #00c9c9;
}

/* `EL-ecd9240b` (Content): gap 24 entre H2 y parrafo, tope max-width: 768px para escritorio */
.ocx-about-team__body {
	display: flex;
	flex-direction: column;
	gap: 24px;
	width: 100%;
	max-width: 768px;
}

/*
 * `#12852:1525`, estilo "Heading/H2". Figma lo trae en Manrope 500, pero el
 * criterio del sitio es mantener Widescreen en los headings; por eso el resto
 * de H2 de la pagina (y `.ocx-about-why__heading`) declara el mismo par
 * `widescreen / 400` y no el Manrope del estilo.
 */
.ocx-about-team__heading {
	margin: 0;
	font-family: var(--wp--preset--font-family--widescreen, "widescreen", sans-serif);
	font-weight: 400;
	font-size: 52px;
	line-height: 1.2;
	letter-spacing: -0.01em;
	color: #000;
	max-width: 768px;
}

.ocx-about-team__heading-accent {
	font-family: var(--wp--preset--font-family--widescreen-ex, "widescreen-ex", "Widescreen Ex", sans-serif);
	color: #00C9C9;
}

/* `#12852:1526`, estilo "Text/Medium/Normal (12529:83500)", fill #000. Espacio vertical de 32px debajo del parrafo. */
.ocx-about-team__lead {
	margin: 0 0 32px;
	font-family: var(--wp--preset--font-family--widescreen, "widescreen", sans-serif);
	font-weight: 300;
	font-size: 18px;
	line-height: 1.5;
	color: #000;
	max-width: 768px;
}

/*
 * `EL-fb9d891a` (Row): tres cards iguales con gap 32. Va como grid y no como el
 * flex row de Figma porque `repeat(3, minmax(0, 1fr))` no puede envolver, y el
 * corte a 2 y a 1 columna se resuelve con una sola linea por breakpoint.
 */
.ocx-about-team__row {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 32px;
}

/*
 * `EL-d65676c4`: `justify-content: space-between` sobre un alto fijo de 674,
 * que es lo que separa el bloque de texto de los iconos. `align-items` va en
 * `flex-start` para que el contenido de 352px no se estire hasta los 362.67px
 * que mide la celda a 1440: en Figma la card llena pero el contenido es `hug`.
 */
.ocx-about-team__card {
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	align-items: flex-start;
	min-height: 674px;
	box-sizing: border-box;
}

/* `EL-be30d871`: gap 36 entre figure y Content. */
.ocx-about-team__card-main {
	display: flex;
	flex-direction: column;
	gap: 36px;
	width: 352px;
	max-width: 100%;
}

/* `EL-bf1839ad` / `EL-2074d3ea`: 352x352, `scaleMode: FILL`, radius 16. */
.ocx-about-team__image {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 1 / 1;
	object-fit: cover;
	border-radius: var(--Radius-Large, 16px);
}

/* `EL-8774de49`: ancho fijo 352, gap 16. */
.ocx-about-team__card-body {
	display: flex;
	flex-direction: column;
	gap: 16px;
	width: 100%;
}

/* `EL-e9077466` (Title): column sin gap — nombre y rol van pegados. */
.ocx-about-team__card-title {
	display: flex;
	flex-direction: column;
	gap: 0;
}

/* `Text/Large/Semi Bold`: Widescreen 600 / 22 / 1.5em, fill #000. */
.ocx-about-team__name {
	margin: 0;
	font-family: var(--wp--preset--font-family--widescreen, "widescreen", sans-serif);
	font-weight: 600;
	font-size: 22px;
	line-height: 1.5;
	color: #000;
}

/* `Text/Medium/Normal (115:3264)`, fill #000. */
.ocx-about-team__role {
	margin: 0;
	font-family: var(--wp--preset--font-family--widescreen, "widescreen", sans-serif);
	font-weight: 400;
	font-size: 18px;
	line-height: 1.5;
	color: #000;
}

/* `Text/Regular/Normal`, fill #000. */
.ocx-about-team__bio {
	margin: 0;
	font-family: var(--wp--preset--font-family--widescreen, "widescreen", sans-serif);
	font-weight: 300;
	font-size: 16px;
	line-height: 1.5;
	color: #000;
}

/* `EL-f917f536` (Social Icons): gap 14, iconos de 24. */
.ocx-about-team__social {
	display: flex;
	align-items: center;
	gap: 14px;
}

.ocx-about-team__social-link {
	display: inline-flex;
	width: 24px;
	height: 24px;
}

.ocx-about-team__social-link img {
	display: block;
	width: 24px;
	height: 24px;
}

/* --------------------------------------------------------------------------
   Layout / 1 / — Why OpenCX (#12852:1602)
   -------------------------------------------------------------------------- */
/*
 * El nodo es `mode: none`: los hijos van posicionados, sin padding en la
 * seccion. El cuadrado `#12934:1032` (1280x640, stroke cyan) y el Container
 * `#12852:1603` (mismo box, stroke #CBBB85, radius 20) quedan aplanados igual
 * que en el hero: wrapper + contenido.
 */
.ocx-section.ocx-about-why__section {
	padding: 0 80px;
	background: var(--Color-OpenCX-Dune-Lightest, #F8F6F0);
}

.ocx-about-why__outer {
	position: relative;
	width: 100%;
	max-width: var(--Container-container-large, 1280px);
	margin: 0 auto;
	box-sizing: border-box;
	border: var(--Stroke-Hairline, 0.5px) solid #00c9c9;
}

.ocx-about-why__container {
	box-sizing: border-box;
	margin: -1px;
	width: calc(100% + 2px);
	padding: 0 80px;
	border: var(--Stroke-Hairline, 0.5px) solid #cbbb85;
	border-radius: var(--Radius-Medium, 20px);
}

/*
 * `#12852:1604`: `height: 640` fijo en Figma. Va como `min-height` para que un
 * texto que crezca empuje la caja en vez de desbordarla.
 */
.ocx-about-why__component {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 40px;
	min-height: 640px;
	box-sizing: border-box;
}

/* `#12852:1605` */
.ocx-about-why__content {
	flex: 0 1 611px;
	max-width: 611px;
	width: 100%;
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: 32px;
}

.ocx-about-why__title {
	display: flex;
	flex-direction: column;
	gap: 16px;
}

.ocx-about-why__tagline {
	display: flex;
	align-items: center;
	gap: 8px;
}

.ocx-about-why__bracket {
	display: block;
	flex: 0 0 auto;
	width: 24px;
	height: 24px;
}

/* `#12852:1608`, estilo "Heading/Tagline", fill #B69E52 (el de team es cyan). */
.ocx-about-why__tagline-text {
	font-family: var(--wp--preset--font-family--widescreen, "widescreen", sans-serif);
	font-weight: 400;
	font-size: 22px;
	line-height: 1.5;
	color: #b69e52;
}

.ocx-about-why__body {
	display: flex;
	flex-direction: column;
	gap: 32px;
	width: 611px;
	max-width: 100%;
	min-height: 332px;
	opacity: 1;
}

/* `#12852:1610`, estilo "Heading/H2" con fill #000 (Widescreen, ver nota arriba). */
.ocx-about-why__heading {
	margin: 0;
	font-family: var(--wp--preset--font-family--widescreen, "widescreen", sans-serif);
	font-weight: 400;
	font-size: 52px;
	line-height: 1.2;
	letter-spacing: -0.01em;
	color: #000;
}

/* `#12852:1611`, estilo "Text/Medium/Normal (115:3264)", fill #000. */
.ocx-about-why__lead {
	margin: 0;
	font-family: var(--wp--preset--font-family--widescreen, "widescreen", sans-serif);
	font-weight: 300;
	font-size: 18px;
	line-height: 1.5;
	color: #000;
}

/*
 * `#12852:1612`: 371x369.
 */
.ocx-about-why__image {
	display: block;
	flex: 0 0 371px;
	width: 371px;
	height: 369px;
	object-fit: contain;
	opacity: 1;
}

/* --------------------------------------------------------------------------
   CTA Solution (#12852:1613) — reuso de .ocx-solaas-cta__*
   -------------------------------------------------------------------------- */
/*
 * El H2 del mismo nodo usa "Heading/H2 (12599:90513)" (Manrope) en Solution y
 * Manrope tambien aca en Figma, pero el criterio del sitio es Widescreen en los
 * headings. La clase doble lleva la especificidad a (0,2,0) y el `!important`
 * hace falta porque la base `.ocx-solaas-cta__heading` tambien lo declara.
 */
.ocx-solaas-cta__heading.ocx-about-cta__heading {
	font-family: var(--wp--preset--font-family--widescreen, "widescreen", sans-serif) !important;
	font-weight: 400 !important;
}

.page-about .ocx-solaas-cta__section,
.page-id-72 .ocx-solaas-cta__section,
.page-template-page-about .ocx-solaas-cta__section {
	background-color: var(--Color-OpenCX-Dune-Lightest, #F8F6F0) !important;
	background: var(--Color-OpenCX-Dune-Lightest, #F8F6F0) !important;
}

.page-about .ocx-solaas-cta__container,
.page-id-72 .ocx-solaas-cta__container,
.page-template-page-about .ocx-solaas-cta__container {
	background-color: var(--Color-OpenCX-Dune-Lightest, #F8F6F0) !important;
	background-image: url('../images/pattern-tile.svg') !important;
	background-repeat: repeat !important;
	background-size: 60px 60px !important;
}

.page-about .ocx-textured-divider__container,
.page-id-72 .ocx-textured-divider__container,
.page-template-page-about .ocx-textured-divider__container {
	border-left-color: #00c9c9 !important;
	border-right-color: #00c9c9 !important;
}

/* --------------------------------------------------------------------------
   Responsive — About no tiene frame mobile/tablet en Figma, los cortes son
   derivados. Los tokens ya bajan solos: --Page-Padding-padding-global 64 -> 20
   y --Section-Padding-padding-section-medium 80 -> 48 debajo de 1200px, lo
   que cubre el padding de la seccion de team y los containers.
   -------------------------------------------------------------------------- */
@media (max-width: 1199.98px) {
	.ocx-section.ocx-about-hero__section,
	.ocx-section.ocx-about-vision__section,
	.ocx-section.ocx-about-team__section,
	.ocx-section.ocx-about-why__section {
		padding: 0 10px !important;
	}

	.ocx-about-hero__outer {
		display: block !important;
		position: relative !important;
		width: 100% !important;
		max-width: 100% !important;
		height: auto !important;
		min-height: auto !important;
		margin: 0 auto !important;
		padding: 0 !important;
		background: #e5edf0 !important;
		border: var(--Stroke-Hairline, 0.5px) solid var(--Color-Strong-Cyan, #00C9C9) !important;
		border-radius: 0 !important;
		overflow: visible !important;
		box-sizing: border-box !important;
	}

	.ocx-about-hero__container {
		position: relative !important;
		display: flex !important;
		flex-direction: column !important;
		width: calc(100% + 1px) !important;
		max-width: none !important;
		height: auto !important;
		min-height: auto !important;
		margin: -0.5px !important;
		padding: 40px 24px;
		border-radius: var(--Radius-Medium, 20px) !important;
		border: var(--Stroke-Hairline, 0.5px) solid #cbbb85 !important;
		overflow: hidden !important;
		box-sizing: border-box !important;
	}

	.ocx-about-hero__heading {
		font-size: 44px;
	}

	.ocx-about-vision__container,
	.ocx-about-team__container,
	.ocx-about-why__outer {
		width: 100% !important;
		max-width: 100% !important;
		margin: 0 auto !important;
	}

	.ocx-about-vision__component {
		padding: 0 20px;
	}

	.ocx-about-why__container {
		padding: 0 20px;
		width: 100% !important;
		max-width: 100% !important;
		margin: 0 auto !important;
	}

	.ocx-about-why__component {
		gap: 40px;
		min-height: 0;
	}
}

@media (max-width: 991.98px) {
	.ocx-section.ocx-about-hero__section,
	.ocx-section.ocx-about-vision__section,
	.ocx-section.ocx-about-team__section,
	.ocx-section.ocx-about-why__section {
		padding: 0 10px !important;
	}

	.ocx-about-hero__container {
		padding: 48px 32px;
		background-image: linear-gradient(to right, rgba(28, 73, 90, 0.95) 0%, rgba(28, 73, 90, 0.88) 55%, rgba(28, 73, 90, 0.6) 100%), url("../images/about-hero.webp");
		background-position: 75% center;
	}

	.ocx-about-hero__card {
		grid-template-columns: minmax(0, 1fr);
		gap: 32px;
	}

	.ocx-about-hero__col-media {
		display: none;
	}

	.ocx-about-hero__heading {
		font-size: 40px;
	}

	/* Vision se apila: las dos columnas fijas de 495 + 619 no entran. */
	.ocx-about-vision__component {
		flex-direction: column;
		gap: 0;
		padding: 0 20px;
	}

	.ocx-about-vision__col-left,
	.ocx-about-vision__col-right {
		flex: none;
		width: 100%;
		max-width: none;
		margin-left: 0;
	}

	.ocx-about-team__row {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	/*
	 * Los 674px fijos son el alto de una card con la imagen al lado. Con dos
	 * columnas la celda es mas ancha, el bio baja de lineas y el `space-between`
	 * repartiria 200px de aire; ademas en la fila que queda con una sola card
	 * ese aire seria ridiculo.
	 */
	.ocx-about-team__card {
		min-height: 0;
	}

	.ocx-about-team__card-main {
		width: 100%;
	}

	.ocx-about-why__container {
		padding: 40px 20px;
	}

	.ocx-about-why__component {
		flex-direction: column;
		align-items: stretch;
		gap: 32px;
	}

	.ocx-about-why__content {
		flex: none;
		width: 100%;
		max-width: 100%;
	}

	.ocx-about-why__body {
		width: 100%;
		min-height: auto;
	}

	.ocx-about-why__image {
		flex: none;
		width: 100%;
		max-width: 371px;
		height: auto;
		aspect-ratio: 371 / 369;
		margin: 0 auto;
	}
}

@media (max-width: 767.98px) {
	.ocx-about-hero__outer {
		display: block !important;
		position: relative !important;
		width: 100% !important;
		max-width: 100% !important;
		height: auto !important;
		min-height: auto !important;
		margin: 0 auto !important;
		padding: 0 !important;
		background: #e5edf0 !important;
		border: var(--Stroke-Hairline, 0.5px) solid var(--Color-Strong-Cyan, #00C9C9) !important;
		border-radius: 0 !important;
		overflow: visible !important;
		box-sizing: border-box !important;
	}

	.ocx-about-hero__container {
		position: relative !important;
		display: flex !important;
		flex-direction: column !important;
		width: calc(100% + 1px) !important;
		max-width: none !important;
		height: auto !important;
		min-height: auto !important;
		margin: -0.5px !important;
		padding: 40px 22px 360px !important;
		background-color: #1c495a !important;
		background-image: url("../images/opencx-about-hero-mobile.webp") !important;
		background-position: center bottom !important;
		background-size: cover !important;
		background-repeat: no-repeat !important;
		border: var(--Stroke-Hairline, 0.5px) solid #cbbb85 !important;
		border-radius: var(--Radius-Medium, 20px) !important;
		overflow: hidden !important;
		box-sizing: border-box !important;
	}

	.ocx-about-hero__col-text {
		gap: 32px;
	}

	.ocx-about-hero__content {
		gap: 20px;
	}

	.ocx-about-hero__heading {
		font-size: 34px;
		line-height: 1.1;
		letter-spacing: -0.01em;
	}

	.ocx-about-hero__lead {
		font-size: 15px;
		line-height: 1.5;
		font-weight: 300;
		color: #e8ecee;
	}

	.ocx-about-hero__actions {
		display: flex;
		justify-content: flex-start;
		margin-top: 4px;
	}

	.ocx-about-hero__btn {
		width: auto;
		max-width: fit-content;
		display: inline-flex;
		align-items: center;
		justify-content: center;
		padding: 11px 24px;
		font-size: 15px;
		line-height: 1.5;
		color: #cbbb85;
		border: 1px solid #cbbb85;
		background: transparent;
		border-radius: 0;
		text-align: center;
	}

	.ocx-about-hero__btn:hover {
		background-color: #cbbb85;
		color: #1c495a;
	}

	.ocx-about-vision__component {
		padding: 0 10px;
	}

	.ocx-about-vision__col-left,
	.ocx-about-vision__col-right {
		padding: 32px 24px;
	}

	.ocx-about-vision__heading {
		font-size: 32px;
	}

	.ocx-about-team__row {
		grid-template-columns: minmax(0, 1fr);
	}

	.ocx-about-team__heading,
	.ocx-about-why__heading {
		font-size: 32px;
		line-height: 1.25;
	}

	.ocx-section.ocx-about-why__section {
		padding: 0 10px;
	}

	.ocx-about-why__container {
		padding: 32px 20px;
	}
}

/*
 * Variante centrada de "Header / 64 /", la instancia de la pagina Contact
 * (#10227:110803). Mismo nodo de Figma que el hero de About pero con otra
 * configuracion, asi que va como modificador y no como prefijo nuevo:
 *
 *   About    -> Component con `sizing.horizontal: fixed` de 904, H1 y parrafo a la
 *               izquierda, y `padding: 112px 64px 0px` (sin padding abajo).
 *   Contact  -> Component con tope de 768 centrado en el container, H1 y parrafo
 *               centrados, y `padding: 112px 64px` completo.
 *
 * El modificador va en la seccion (para el padding) y en el Component (para el ancho),
 * con la misma clase en los dos. Como ambas reglas de la base son (0,2,0), el
 * modificador tiene que ir DESPUES en el archivo para ganar el empate.
 */
.ocx-section.ocx-h64--center {
	padding-bottom: var(--Section-Padding-padding-section-large, 112px);
}

/*
 * Las reglas de caja van con los DOS selectores de clase a proposito. La clase
 * modificadora esta en la seccion (para el padding) y en el Component (para el ancho), y
 * si estas reglas usaran solo `.ocx-h64--center` se aplicarian tambien a la seccion:
 * caparian la seccion entera a 768 y el padding de 64 entraria adentro, dejando 640 de
 * contenido real en vez de 768.
 */
.ocx-h64__component.ocx-h64--center {
	display: flex;
	flex-direction: column;
	align-items: center;
	align-self: stretch;
	gap: 24px;
	/*
	 * `width: 100%` es obligatorio, no cosmético: la base `.ocx-h64__component` declara
	 * `width: 904px`, y mientras haya un `width` explicito el `align-self: stretch` no
	 * aplica, asi que el tope de 768 no se encoge y desborda por debajo de 768 de viewport
	 * (40px a 768, 418px a 390). Con el 100% el 768 acts como tope y la caja baja a lo
	 * que entre en el container, que es lo mismo que hace `.ocx-i62__component`.
	 */
	width: 100%;
	max-width: var(--Max-Width-max-width-large, 768px);
	/*
	 * `align-self: stretch` estira la caja hasta el container, pero `max-width: 768px`
	 * la corta y en ese caso el spec la deja pegada al borde de inicio, con el centro en
	 * 448 en vez de 656. El `margin-inline: auto` la centra en el container, que es el
	 * mismo apaño que usa `.ocx-i62__component`.
	 */
	margin-inline: auto;
}

.ocx-h64--center .ocx-h64__title,
.ocx-h64--center .ocx-h64__lead {
	text-align: center;
}

/*
 * Figma "Contact / 4 /" (#10227:111031), la seccion con el formulario de la pagina
 * Contact. Es el unico bloque nuevo de la pagina: el hero reusa `.ocx-h64__*` con el
 * modificador `--center` y el footer es el comun.
 *
 * A diferencia de las demas secciones, esta no usa la cadena `ocx-section--large` para el
 * padding sino el token directo, y el gap vertical de la seccion y del Container es de
 * 48 (no 80 como en el resto de la pagina).
 *
 * Los controles del formulario (text input, select, radio, checkbox, textarea) son
 * instancias de componentes de Figma que no tienen equivalente en bloques de WordPress,
 * asi que van como HTML plano dentro de un unico bloque `wp:html`. La copy de arriba
 * (H2 y parrafo) si queda como bloques editables.
 */
.ocx-section.ocx-c4__section {
	padding: var(--Section-Padding-padding-section-large, 112px) var(--Page-Padding-padding-global, 64px);
	gap: 48px;
	align-items: stretch;
}

/*
 * El Container lleva tope de 768px, igual que el hero, y se centra en la seccion. Se
 * aparta del nodo de Figma, que lo tiene en `fill` a los 1312: el tope es una decision de
 * diseño, no lo que dice el wireframe.
 *
 * `width: 100%` es lo que hace que el 768 sea un tope y no un ancho fijo (mismo motivo que
 * en `.ocx-h64__component.ocx-h64--center`).
 *
 * El `gap` sigue en 48 y no en 24: 48 es lo que pide el Container del nodo, y 24 corresponde
 * al `Form` (#4174:41787), que es un nivel mas adentro.
 *
 * El `align-items: flex-start` va aqui y no en el `Form`: en el form, los hijos son el
 * select, el textarea y los checkbox, y con flex-start cada uno se encogeria al ancho de
 * su contenido en vez de ocupar los 768.
 */
.ocx-c4__container {
	align-self: stretch;
	width: 100%;
	min-width: 0;
	max-width: var(--Max-Width-max-width-large, 768px);
	align-items: flex-start;
	gap: 48px;
}

/*
 * El centrado del tope va en una regla aparte y no en la de arriba, por la misma razon que
 * en `.ocx-h62__container` y `.ocx-c25__container`:
 * `.is-layout-flex > :is(*, div) { margin: 0 }` es (0,1,1) y gana a un
 * `margin-inline: auto` pelado, que es (0,1,0) y ademas computa a 0px, dejando la caja de
 * 768 pegada al borde de inicio en vez de centrada. Con el `.ocx-section >` delante la regla
 * llega a (0,2,0) y el auto si absorbe el sobrante.
 */
.ocx-section > .ocx-c4__container {
	margin-inline: auto;
}

/* "Section Title" (#4174:41782): columna con `gap: 16px`. El Tagline Wrapper (#5322:13514) va vacio en Figma, asi que se omite. */
.ocx-c4__title {
	align-self: stretch;
	width: 100%;
	min-width: 0;
	align-items: stretch;
	gap: 16px;
}

/* "Content" (#4174:41784): columna con `gap: 24px`, con el H2 y el parrafo. */
.ocx-c4__body {
	align-self: stretch;
	width: 100%;
	min-width: 0;
	align-items: stretch;
	gap: 24px;
}

.ocx-c4__heading,
.ocx-c4__lead {
	margin: 0;
	font-family: var(--wp--preset--font-family--widescreen);
	text-align: left;
	color: var(--Color-Scheme-1-Text, #000000);
}

.ocx-c4__heading {
	font-size: var(--Text-Sizes-Heading-2, 52px);
	font-weight: 500;
	line-height: 1.2;
	letter-spacing: -0.01em;
}

.ocx-c4__lead {
	font-size: var(--Text-Sizes-Text-Medium, 18px);
	font-weight: 400;
	line-height: 1.5;
}

/* "Form" (#4174:41787): columna con `gap: 24px` que agrupa todos los controles. */
.ocx-c4__form {
	display: block;
	width: 100%;
}

/*
 * "Inputs" (#4174:41788 y #4174:41795): dos campos en fila con `gap: 24px`. Cada campo es
 * una columna con `gap: 8px` entre el label y el control.
 */
.ocx-c4__row {
	display: flex;
	flex-wrap: wrap;
	gap: 24px;
}

.ocx-c4__row > .ocx-c4__field {
	flex: 1 1 0;
	min-width: 0;
}

.ocx-c4__field {
	display: flex;
	flex-direction: column;
	gap: 8px;
	margin: 0 0 24px;
}

/*
 * Los labels usan "Text/Regular/Normal" (16px). Los de la seccion de radios y el del
 * checkbox usan una variante con `textAlignVertical: CENTER` pero el mismo tamano, asi
 * que comparten tipo.
 */
.ocx-c4__label {
	margin: 0;
	font-family: var(--wp--preset--font-family--widescreen);
	font-size: var(--Text-Sizes-Text-Regular, 16px);
	font-weight: 400;
	line-height: 1.5;
	color: var(--Color-Scheme-1-Text, #000000);
}

/*
 * "Text input" (#4174:41791): caja con `padding: 8px 0px` y borde de 1px
 * rgba(0,0,0,0.15) con `strokeAlign: OUTSIDE`, que en CSS es indistinguible de un
 * `border` normal. El `padding` lateral es 0 en Figma, asi que el texto arranca pegado
 * al borde: se respeta y se compensa con un `padding-inline` minimo de 2px para que el
 * cursor no quede encima de la linea.
 */
.ocx-c4__input,
.ocx-c4__textarea,
.ocx-c4__select {
	width: 100%;
	box-sizing: border-box;
	font-family: var(--wp--preset--font-family--widescreen);
	font-size: var(--Text-Sizes-Text-Regular, 16px);
	font-weight: 400;
	line-height: 1.5;
	color: var(--Color-Scheme-1-Text, #000000);
	background: transparent;
	border: 1px solid rgba(0, 0, 0, 0.15);
	border-radius: 0;
	padding: 8px 2px;
	appearance: none;
}

.ocx-c4__input:focus-visible,
.ocx-c4__textarea:focus-visible,
.ocx-c4__select:focus-visible {
	outline: 2px solid var(--Color-Scheme-1-Text, #000000);
	outline-offset: 2px;
}

.ocx-c4__input::placeholder,
.ocx-c4__textarea::placeholder {
	color: rgba(0, 0, 0, 0.6);
	opacity: 1;
}

/*
 * "Text Area" (#4174:41818): `padding: 12px 12px 12px 0px` y alto FIJO de 180
 * (`dimensions.height: 180`). Se declara con `min-height` y no con `height` para que en
 * mobile la caja siga siendo usable si el navegador le da un alto distinto.
 */
.ocx-c4__textarea {
	min-height: 180px;
	padding: 12px 2px;
	resize: vertical;
}

/*
 * "Select" (#4174:41804): `padding: 8px 12px`, `gap: 16px` y fondo rgba(0,0,0,0.05) con
 * borde **transparente** (fill_75800f08), o sea que la caja se ve por el fondo, no por el
 * borde. El chevron va como `background-image` con el SVG, y el `padding-right` deja
 * lugar para que no se solape con el texto largo.
 */
.ocx-c4__select {
	padding: 8px 40px 8px 12px;
	background-color: rgba(0, 0, 0, 0.05);
	/*
	 * El borde va **transparente** (fill_75800f08 en el nodo), al reves que en los text
	 * input: la caja del select se ve por su fondo gris, no por el contorno. Sin esto
	 * heredaba el `rgba(0,0,0,0.15)` de la regla compartida.
	 */
	border-color: transparent;
	background-image: url("../images/chevron-down.svg");
	background-repeat: no-repeat;
	background-position: right 12px center;
	background-size: 24px 24px;
	cursor: pointer;
}

/*
 * "Radios" (#5148:2660): columna con `padding: 16px 0px` y `gap: 16px`. El padding
 * vertical separa este grupo del select y del textarea de abajo.
 *
 * El grupo es un `div role="group" aria-labelledby` en lugar de un `fieldset` con
 * `legend`: Chrome no renderiza el `legend` como flex item (lo saca del flujo y lo dibuja
 * sobre el borde del fieldset), y ademas el `fieldset` trae `border: 2px groove` y padding
 * propios que hay que resetear. El `role="group"` con su etiquetaAccessible es el
 * equivalente y no arrastra ninguno de los dos problemas.
 */
.ocx-c4__radios {
	display: flex;
	flex-direction: column;
	gap: 16px;
	margin: 0 0 24px;
	padding: 16px 0;
}

.ocx-c4__radios-list {
	display: flex;
	flex-direction: column;
	gap: 14px;
}

/*
 * "Row" (#5148:2663, #5148:2666, #5148:2669): fila de DOS opciones con `gap: 24px` y alto
 * fijo de 24 (`dimensions.height: 24`). Son tres filas para las seis opciones.
 */
.ocx-c4__radio-row {
	display: flex;
	gap: 24px;
	min-height: 24px;
}

/* "Radio" (#4179:9093): fila con `gap: 12px` entre el circulo de 18 y el label. */
.ocx-c4__radio {
	display: flex;
	align-items: center;
	gap: 12px;
	flex: 1 1 0;
	min-width: 0;
	margin: 0;
	/*
	 * La tipografia va en el label y no en el span del texto: el span solo hereda, y
	 * si se deja tomaba el `line-height` global del body (1.8 en desktop), que inflaba
	 * la fila de los 24px fijos de Figma a 28.8.
	 */
	font-family: var(--wp--preset--font-family--widescreen);
	font-size: var(--Text-Sizes-Text-Regular, 16px);
	font-weight: 400;
	line-height: 1.5;
	color: var(--Color-Scheme-1-Text, #000000);
}

/*
 * El circulo: 18x18, `borderRadius: 100px` (o sea, redondo), fondo rgba(0,0,0,0.05) y
 * borde **transparente** de 1px. Se oculta el input nativo y se dibuja con
 * `appearance: none`; el estado checked se marca con el borde en negro.
 */
.ocx-c4__radio input[type="radio"] {
	appearance: none;
	-webkit-appearance: none;
	flex: 0 0 auto;
	width: 18px;
	height: 18px;
	margin: 0;
	border: 1px solid transparent;
	border-radius: 100px;
	background-color: rgba(0, 0, 0, 0.05);
	cursor: pointer;
}

.ocx-c4__radio input[type="radio"]:checked {
	border-color: var(--Color-Scheme-1-Text, #000000);
}

.ocx-c4__radio input[type="radio"]:focus-visible {
	outline: 2px solid var(--Color-Scheme-1-Text, #000000);
	outline-offset: 2px;
}

/* "Checkbox" (#4174:41819): `padding: 0 0 16px`, `gap: 8px`, caja de 18x18 sin radio. */
.ocx-c4__checkbox {
	display: flex;
	align-items: center;
	gap: 12px;
	margin: 0 0 16px;
	cursor: pointer;
}

.ocx-c4__checkbox input[type="checkbox"] {
	appearance: none;
	-webkit-appearance: none;
	flex: 0 0 auto;
	width: 20px;
	height: 20px;
	margin: 0;
	border: 1.5px solid var(--Color-OpenCX-Dune-Light, #CBBB85);
	border-radius: 4px;
	background-color: #FFFFFF;
	cursor: pointer;
	position: relative;
	transition: background-color 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}

.ocx-c4__checkbox:hover input[type="checkbox"] {
	border-color: #162227;
}

.ocx-c4__checkbox input[type="checkbox"]:checked {
	background-color: #162227 !important;
	border-color: #162227 !important;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23FFFFFF' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E") !important;
	background-repeat: no-repeat !important;
	background-position: center !important;
	background-size: 13px 13px !important;
}

.ocx-c4__checkbox input[type="checkbox"]:focus-visible {
	outline: 2px solid var(--Color-OpenCX-Gold, #B69E52);
	outline-offset: 2px;
}

/* El texto del checkbox usa "ts1" (14px) con "Terms" en "ts2", que va subrayado. */
.ocx-c4__checkbox-text {
	margin: 0;
	font-family: var(--wp--preset--font-family--widescreen);
	font-size: var(--Text-Sizes-Text-Small, 14px);
	font-weight: 400;
	line-height: 1.5;
	color: var(--Color-Scheme-1-Text, #000000);
}

.ocx-c4__checkbox-text a {
	color: inherit;
	text-decoration: underline;
}

/* El boton "Submit" es el primario de siempre, con el padding de 10px 24px del nodo. */
.ocx-c4__submit {
	margin: 0;
}

/*
 * Responsive. Figma no trae frame de mobile para Contact, asi que los cortes son propios:
 * los pares de campos y de radios bajan a una columna, que es lo unico que se puede hacer
 * en 390 sin que el label del radio quede pegado al borde.
 *
 * Para las filas de radios hay que habilitar `flex-wrap`: el contenedor es
 * `flex-direction: row` sin wrap, asi que un `flex: 1 1 100%` en las opciones solo las
 * encogeria en vez de partirlas en dos filas. Con el wrap, el 100% de base las obliga a
 * una por fila.
 */
@media (max-width: 767.98px) {
	.ocx-c4__row > .ocx-c4__field {
		flex: 1 1 100%;
	}

	.ocx-c4__radio-row {
		flex-wrap: wrap;
		gap: 16px;
	}

	.ocx-c4__radio {
		flex: 1 1 100%;
	}
}

@media (max-width: 359.98px) {
	.ocx-header__logo {
		width: 116px;
		height: 36px;
	}

	.ocx-header__logo .wp-block-site-logo {
		width: 108px;
	}

	/* El clon de `logo-intro.js` tiene que medir lo mismo que el logo: el vuelo es una
	 * traslacion porque los dos extremos son identicos. */
	.ocx-logo-intro__clone {
		width: 108px;
	}

	.ocx-header__col {
		gap: 16px;
	}

	.ocx-header--ecosystem .wp-block-button.ocx-btn--primary .wp-block-button__link {
		padding: 8px 14px;
	}

	/*
	 * Ajuste de tipografia para 320: baja los H1 grandes al valor de
	 * "Heading 1" en Variables/Typography/Mobile.tokens.json, que es 40px.
	 *
	 * Los H1 de escritorio salen de --Text-Sizes-Heading-1 (72px, el valor que
	 * documenta la seccion Typography del Style Guide) y a 320px no entran, asi
	 * que todos los selectores que usan ese token tienen que bajar aqui. Faltan
	 * tres: l491 (Ecosystem), s62 (Solution) e i62 (Industries/Insights).
	 */
	.ocx-h62__content .wp-block-heading,
	.ocx-h62b__content .wp-block-heading,
	.ocx-h90__card .wp-block-heading,
	.ocx-l491__features .wp-block-heading,
	.ocx-s62__content .wp-block-heading,
	.ocx-i62__content .wp-block-heading {
		font-size: var(--Text-Sizes-Heading-1, 40px);
	}

	.ocx-h64__title {
		font-size: var(--Text-Sizes-Heading-1, 40px);
	}
}

/* ==========================================================================
   DESKTOP CONTAINER & PADDING STANDARDIZATION (>= 1200px)
   Standardizes container alignment across ALL pages on desktop and iPad
   landscape (1376px). Ensures every section outer box is max-width 1280px
   centered with margin: 0 auto, eliminating width mismatches (e.g. 1216px vs 1280px)
   and ensuring vertical hairline strokes ("trazos") line up seamlessly.
   ========================================================================== */
@media (min-width: 1200px) {
	.ocx-section,
	section.wp-block-group,
	div.wp-block-group.alignfull,
	.wp-block-group.alignfull,
	div.wp-block-group[class*="__section"],
	[class*="__section"],
	.ocx-hero,
	.ocx-textured-divider,
	.ocx-value-prop,
	.ocx-problem,
	.ocx-meet,
	.ocx-how-it-works,
	.ocx-why,
	.ocx-cta-roadmap,
	.ocx-industries-hero__section,
	.ocx-industries__section,
	.ocx-testimonial__section,
	.ocx-business-outcomes__section,
	.ocx-industries-preview__section,
	.ocx-c25__section,
	.ocx-cta-homepage__section,
	.ocx-solaas-hero__section,
	.ocx-solaas-benefits__section,
	.ocx-solaas-cta__section,
	.ocx-h62__section,
	.ocx-aios__section,
	.ocx-eco-pillars__section,
	.ocx-l19__section,
	.ocx-eco-sec__section,
	.ocx-l491__section,
	.ocx-eco-compare__section,
	.ocx-eco-llm__section,
	.ocx-eco-cta__section,
	.ocx-about-hero__section,
	.ocx-about-vision__section,
	.ocx-about-team__section,
	.ocx-about-why__section,
	.ocx-contact-hero__section {
		padding-left: 0 !important;
		padding-right: 0 !important;
		width: 100% !important;
		box-sizing: border-box !important;
	}

	.ocx-hero__container,
	.ocx-h90__outer,
	.ocx-problem__container,
	.ocx-meet__container,
	.ocx-how-it-works__outer,
	.ocx-why__outer,
	.ocx-cta-roadmap__outer,
	.ocx-business-outcomes__container,
	.ocx-industries-preview__container,
	.ocx-testimonial__outer,
	.ocx-cta-homepage__container,
	.ocx-industries-hero__outer,
	.ocx-industries__outer,
	.ocx-ecosystem-hero__outer,
	.ocx-aios__outer,
	.ocx-pillars__outer,
	.ocx-solution-hero__outer,
	.ocx-solution-why__outer,
	.ocx-about-hero__outer,
	.ocx-contact-hero__outer,
	.ocx-textured-divider__container,
	.ocx-res-divider__container,
	.ocx-footer__container {
		width: 100% !important;
		max-width: 1280px !important;
		margin-left: auto !important;
		margin-right: auto !important;
		box-sizing: border-box !important;
	}
}

/* ==========================================================================
   TABLET & MOBILE RESPONSIVE CONTAINER & PADDING STANDARDIZATION (<= 1199.98px)
   Standardizes 10px lateral gutters across ALL pages, ensuring continuous
   vertical border strokes ("trazos") from hero to footer without breaks.
   ========================================================================== */
@media (max-width: 1199.98px) {
	/* Universal 10px lateral padding for all sections */
	.ocx-section,
	section.wp-block-group,
	div.wp-block-group.alignfull,
	.wp-block-group.alignfull,
	div.wp-block-group[class*="__section"],
	[class*="__section"],
	.ocx-hero,
	.ocx-textured-divider,
	.ocx-value-prop,
	.ocx-problem,
	.ocx-meet,
	.ocx-how-it-works,
	.ocx-why,
	.ocx-cta-roadmap,
	.ocx-industries-hero__section,
	.ocx-section.ocx-industries-hero__section,
	.ocx-industries__section,
	.ocx-section.ocx-industries__section,
	.ocx-testimonial__section,
	.ocx-section.ocx-testimonial__section,
	.ocx-solaas-hero__section,
	.ocx-section.ocx-solaas-hero__section,
	.ocx-solaas-benefits__section,
	.ocx-section.ocx-solaas-benefits__section,
	.ocx-solaas-cta__section,
	.ocx-section.ocx-solaas-cta__section,
	.ocx-h62__section,
	.ocx-section.ocx-h62__section,
	.ocx-h62,
	.ocx-aios__section,
	.ocx-section.ocx-aios__section,
	.ocx-aios,
	.ocx-eco-pillars__section,
	.ocx-section.ocx-eco-pillars__section,
	.ocx-l19__section,
	.ocx-section.ocx-l19__section,
	.ocx-eco-sec__section,
	.ocx-section.ocx-eco-sec__section,
	.ocx-l491__section,
	.ocx-section.ocx-l491__section,
	.ocx-eco-compare__section,
	.ocx-section.ocx-eco-compare__section,
	.ocx-eco-llm__section,
	.ocx-section.ocx-eco-llm__section,
	.ocx-eco-cta__section,
	.ocx-section.ocx-eco-cta__section,
	.ocx-about-hero__section,
	.ocx-section.ocx-about-hero__section,
	.ocx-about-vision__section,
	.ocx-section.ocx-about-vision__section,
	.ocx-about-team__section,
	.ocx-section.ocx-about-team__section,
	.ocx-about-why__section,
	.ocx-section.ocx-about-why__section,
	.ocx-contact-hero__section,
	.ocx-section.ocx-contact-hero__section,
	.ocx-business-outcomes__section,
	.ocx-section.ocx-business-outcomes__section,
	.ocx-industries-preview__section,
	.ocx-section.ocx-industries-preview__section,
	.ocx-c25__section,
	.ocx-section.ocx-c25__section,
	.ocx-cta-homepage__section,
	.ocx-section.ocx-cta-homepage__section,
	.ocx-i62__section,
	.ocx-section.ocx-i62__section,
	.ocx-ins__section,
	.ocx-section.ocx-ins__section,
	.ocx-res-hero__section,
	.ocx-section.ocx-res-hero__section,
	.ocx-res-divider__section,
	.ocx-section.ocx-res-divider__section,
	.ocx-res-perspective__section,
	.ocx-section.ocx-res-perspective__section,
	.ocx-interview__section,
	.ocx-section.ocx-interview__section,
	.ocx-footer,
	.ocx-section.ocx-footer {
		padding-left: 10px !important;
		padding-right: 10px !important;
		width: 100% !important;
		max-width: 100% !important;
		box-sizing: border-box !important;
	}

	/* Ensure all card/outer containers fill 100% between the 10px lateral gutters */
	.ocx-hero__container,
	.ocx-h90__outer,
	.ocx-h90__container,
	.ocx-problem__container,
	.ocx-meet__container,
	.ocx-how-it-works__outer,
	.ocx-how-it-works__card,
	.ocx-why__outer,
	.ocx-why__card,
	.ocx-cta-roadmap__outer,
	.ocx-industries-hero__outer,
	.ocx-industries-hero__container,
	.ocx-industries__outer,
	.ocx-industries__container,
	.ocx-solaas-hero__outer,
	.ocx-solaas-hero__container,
	.ocx-solaas-benefits__outer,
	.ocx-solaas-benefits__container,
	.ocx-solaas-cta__container,
	.ocx-h62__outer,
	.ocx-h62__container,
	.ocx-aios__outer,
	.ocx-aios__container,
	.ocx-eco-pillars__outer,
	.ocx-l19__container,
	.ocx-eco-sec__container,
	.ocx-l491__container,
	.ocx-eco-compare__outer,
	.ocx-eco-llm__outer,
	.ocx-eco-cta__container,
	.ocx-about-hero__outer,
	.ocx-about-vision__container,
	.ocx-about-team__container,
	.ocx-about-why__outer,
	.ocx-about-why__container,
	.ocx-contact-hero__outer,
	.ocx-contact-hero__container,
	.ocx-business-outcomes__container,
	.ocx-industries-preview__container,
	.ocx-testimonial__outer,
	.ocx-cta-homepage__container,
	.ocx-i62__container,
	.ocx-ins__container,
	.ocx-res-hero__outer,
	.ocx-res-hero__card,
	.ocx-res-perspective__wrapper,
	.ocx-interview__wrapper,
	.ocx-footer__container {
		width: 100% !important;
		max-width: 100% !important;
		margin-left: auto !important;
		margin-right: auto !important;
		box-sizing: border-box !important;
	}

	/* Continuous vertical hairline strokes on dividers */
	.ocx-textured-divider__container,
	.ocx-res-divider__container {
		width: 100% !important;
		max-width: 100% !important;
		margin-left: auto !important;
		margin-right: auto !important;
		border-left: 0.5px solid var(--Color-OpenCX-Dune-Light, #CBBB85) !important;
		border-right: 0.5px solid var(--Color-OpenCX-Dune-Light, #CBBB85) !important;
		border-top: none !important;
		border-bottom: none !important;
		box-sizing: border-box !important;
	}

	/* Universal 0.5px hairline outer frame with themed corner backgrounds for Ecosystem, Industries & Solution */
	.ocx-h62__outer,
	.ocx-industries-hero__outer {
		margin: 0 auto !important;
		background: var(--Color-OpenCX-Lighter, #B1C9D3) !important;
		border: var(--Stroke-Hairline, 0.5px) solid var(--Color-OpenCX-Dune-Light, #CBBB85) !important;
		border-radius: 0 !important;
		box-sizing: border-box !important;
	}

	.ocx-solaas-hero__outer {
		margin: 0 auto !important;
		background: var(--Color-OpenCX-Dune-Light, #CBBB85) !important;
		border-top: var(--Stroke-Hairline, 0.5px) solid var(--Color-OpenCX-Dune-Light, #CBBB85) !important;
		border-left: var(--Stroke-Hairline, 0.5px) solid var(--Color-OpenCX-Dune-Light, #CBBB85) !important;
		border-right: var(--Stroke-Hairline, 0.5px) solid var(--Color-OpenCX-Dune-Light, #CBBB85) !important;
		border-bottom: none !important;
		border-radius: 0 !important;
		box-sizing: border-box !important;
	}

	.ocx-aios__outer {
		margin: calc(-1 * var(--Stroke-Hairline, 0.5px)) auto 0 !important;
		background: var(--Color-OpenCX-Lighter, #B1C9D3) !important;
		border: var(--Stroke-Hairline, 0.5px) solid var(--Color-OpenCX-Dune-Light, #CBBB85) !important;
		border-radius: 0 !important;
		box-sizing: border-box !important;
	}

	.ocx-eco-pillars__outer {
		margin: calc(-1 * var(--Stroke-Hairline, 0.5px)) auto 0 !important;
		background: #E5EDF0 !important;
		border: var(--Stroke-Hairline, 0.5px) solid var(--Color-OpenCX-Dune-Light, #CBBB85) !important;
		border-radius: 0 !important;
		box-sizing: border-box !important;
	}

	.ocx-industries__outer {
		margin: calc(-1 * var(--Stroke-Hairline, 0.5px)) auto 0 !important;
		background: var(--Color-Blackberry-Light, #8F459C) !important;
		border: var(--Stroke-Hairline, 0.5px) solid var(--Color-OpenCX-Dune-Light, #CBBB85) !important;
		border-radius: 0 !important;
		box-sizing: border-box !important;
	}

	.ocx-solaas-benefits__outer {
		margin: calc(-1 * var(--Stroke-Hairline, 0.5px)) auto 0 !important;
		background: #426676 !important;
		background-color: #426676 !important;
		border: var(--Stroke-Hairline, 0.5px) solid var(--Color-OpenCX-Dune-Light, #CBBB85) !important;
		border-radius: 0 !important;
		box-sizing: border-box !important;
	}

	/* Inner cards with 16px rounded corners, 0.5px hairline stroke & card background */
	.ocx-h62__container,
	.ocx-aios__container,
	.ocx-industries-hero__container,
	.ocx-industries__container,
	.ocx-solaas-hero__container,
	.ocx-solaas-benefits__container {
		width: calc(100% + 1px) !important;
		max-width: none !important;
		margin: -0.5px !important;
		border: var(--Stroke-Hairline, 0.5px) solid var(--Color-OpenCX-Dune-Light, #CBBB85) !important;
		border-radius: var(--Radius-Small, 16px) !important;
		background: var(--Color-OpenCX-White, #FCFBF9) !important;
		background-color: var(--Color-OpenCX-White, #FCFBF9) !important;
		box-sizing: border-box !important;
	}

	.ocx-solaas-hero__container {
		border-bottom: none !important;
	}

	.ocx-eco-pillars__card {
		width: calc(100% + 1px) !important;
		max-width: none !important;
		margin: -0.5px !important;
		border: var(--Stroke-Hairline, 0.5px) solid var(--Color-OpenCX-Dune-Light, #CBBB85) !important;
		border-radius: var(--Radius-Small, 16px) !important;
		background: var(--Color-OpenCX-Dune-Lightest, #F8F6F0) !important;
		box-sizing: border-box !important;
	}

	.ocx-solaas-cta__container {
		width: 100% !important;
		max-width: 100% !important;
		margin: calc(-1 * var(--Stroke-Hairline, 0.5px)) auto 0 !important;
		border: var(--Stroke-Hairline, 0.5px) solid var(--Color-OpenCX-Dune-Light, #CBBB85) !important;
		border-radius: 0 0 var(--Radius-Small, 16px) var(--Radius-Small, 16px) !important;
		box-sizing: border-box !important;
	}

	/* --------------------------------------------------------------------------
	   TESTIMONIAL TABLET & MOBILE (<= 1199.98px)
	   Figma: "Testimonial" #12478:20293 (Mobile & Tablet)
	   -------------------------------------------------------------------------- */
	.ocx-testimonial__section {
		padding: 0 10px !important;
		width: 100% !important;
		background-color: var(--Color-OpenCX-Dune-Lightest, #F8F6F0) !important;
		box-sizing: border-box !important;
	}

	.ocx-testimonial__outer {
		display: block !important;
		width: 100% !important;
		max-width: 100% !important;
		min-height: 0 !important;
		height: auto !important;
		margin: 0 auto !important;
		padding: 0 !important;
		background: var(--Color-Blackberry-Light, #8F459C) !important;
		border: var(--Stroke-Hairline, 0.5px) solid var(--Color-OpenCX-Dune-Light, #CBBB85) !important;
		border-radius: 0 !important;
		box-sizing: border-box !important;
	}

	.ocx-testimonial__card {
		width: calc(100% + 1px) !important;
		margin: -0.5px !important;
		height: auto !important;
		justify-content: flex-start !important;
		background: var(--Color-OpenCX-Dune-Lightest, #F8F6F0) !important;
		border: var(--Stroke-Hairline, 0.5px) solid var(--Color-OpenCX-Dune-Light, #CBBB85) !important;
		border-radius: var(--Radius-Small, 16px) !important;
		padding: 32px 24px !important;
		box-sizing: border-box !important;
	}

	.ocx-testimonial__slider-container {
		width: calc(100% + 48px) !important;
		margin: 0 -24px !important;
		position: relative !important;
		padding-bottom: 84px !important;
		overflow: visible !important;
		display: flex !important;
		flex-direction: column !important;
	}

	.ocx-testimonial__grid {
		display: flex !important;
		flex-direction: row !important;
		flex-wrap: nowrap !important;
		width: 100% !important;
		min-height: 340px !important;
		align-items: flex-start !important;
		overflow-x: auto !important;
		scroll-snap-type: x mandatory !important;
		gap: 24px !important;
		-webkit-overflow-scrolling: touch;
		scrollbar-width: none !important;
	}

	.ocx-testimonial__grid::-webkit-scrollbar {
		display: none !important;
	}

	.ocx-testimonial__item {
		flex: 0 0 284px !important;
		max-width: 284px !important;
		min-width: 284px !important;
		min-height: 0 !important;
		scroll-snap-align: center !important;
		padding: 24px !important;
		box-sizing: border-box !important;
		background: var(--Color-OpenCX-White, #FCFBF9) !important;
		border-top: 0 !important;
		border-bottom: 0 !important;
		border-left: var(--Stroke-Hairline, 0.5px) solid var(--Color-OpenCX-Dune-Light, #CBBB85) !important;
		border-right: var(--Stroke-Hairline, 0.5px) solid var(--Color-OpenCX-Dune-Light, #CBBB85) !important;
	}

	.ocx-testimonial__item:not(:last-child) {
		border-top: 0 !important;
		border-bottom: 0 !important;
		border-left: var(--Stroke-Hairline, 0.5px) solid var(--Color-OpenCX-Dune-Light, #CBBB85) !important;
		border-right: var(--Stroke-Hairline, 0.5px) solid var(--Color-OpenCX-Dune-Light, #CBBB85) !important;
	}

	.ocx-testimonial__arrow-btn {
		position: absolute !important;
		bottom: 24px !important;
		top: auto !important;
		transform: none !important;
		width: 36px !important;
		height: 36px !important;
		padding: 6px !important;
		border-radius: 0 !important;
		background: #D2B5D7 !important;
		border: 1px solid #F8F6F0 !important;
		display: flex !important;
		align-items: center !important;
		justify-content: center !important;
		z-index: 5 !important;
		cursor: pointer !important;
	}

	.ocx-testimonial__arrow-btn img {
		width: 24px !important;
		height: 24px !important;
	}

	.ocx-testimonial__arrow-btn--prev {
		left: calc(50% - 42px) !important;
		right: auto !important;
	}

	.ocx-testimonial__arrow-btn--next {
		left: calc(50% + 6px) !important;
		right: auto !important;
	}

	.ocx-testimonial__dots {
		position: absolute !important;
		bottom: 4px !important;
		left: 0 !important;
		width: 100% !important;
		display: flex !important;
		align-items: center !important;
		justify-content: center !important;
		gap: 8px !important;
		height: auto !important;
		margin: 0 !important;
	}
}

/* ==========================================================================
   MOBILE RESPONSIVENESS & SANDWICH NAVIGATION (< 992px)
   Figma: "Home • Mobile" #12478:17153 & "Navbar / 1 /" (Mobile) #4172:6222
   ========================================================================== */

/* Universal mobile rules (< 992px) */
@media (max-width: 991.98px) {
	/* Scroll lock when mobile drawer is open */
	body.ocx-menu-open {
		overflow: hidden !important;
		position: fixed !important;
		width: 100% !important;
		height: 100% !important;
	}

	/* Global container constraints to prevent horizontal overflow */
	html, body {
		overflow-x: hidden !important;
		overflow-x: clip !important;
		width: 100% !important;
		max-width: 100vw !important;
	}

	/* --------------------------------------------------------------------------
	   1. UNIFIED MOBILE HEADER (< 992px)
	   Figma: "Navbar /mobile /" #12478:20494 & "Navbar / 1 /" #12478:20495
	   -------------------------------------------------------------------------- */
	.ocx-header,
	.ocx-header--home,
	.ocx-header--ecosystem,
	.ocx-header--solution,
	.ocx-header--industries {
		display: flex !important;
		height: 120px !important;
		min-height: 120px !important;
		max-height: 120px !important;
		flex-direction: column !important;
		justify-content: center !important;
		align-items: stretch !important;
		align-self: stretch !important;
		gap: 10px !important;
		padding: 27px 0 !important;
		margin: 0 !important;
		width: 100% !important;
		max-width: 100% !important;
		position: sticky !important;
		top: 0 !important;
		z-index: 9999 !important;
		background: var(--Color-OpenCX-Dune-Lightest, #F8F6F0) !important;
		background-color: var(--Color-OpenCX-Dune-Lightest, #F8F6F0) !important;
		box-sizing: border-box !important;
		border-bottom: none !important;
	}

	.ocx-header--ecosystem,
	.ocx-header--solution,
	.ocx-header--industries,
	.page-industries .ocx-header {
		background: var(--Color-OpenCX-White, #FCFBF9) !important;
		background-color: var(--Color-OpenCX-White, #FCFBF9) !important;
	}

	.ocx-header--about,
	.ocx-header--contact,
	.ocx-header--ecosystem.ocx-header--about,
	.ocx-header--ecosystem.ocx-header--contact,
	.page-about .ocx-header,
	.page-contact .ocx-header {
		background: var(--Color-OpenCX-Dune-Lightest, #F8F6F0) !important;
		background-color: var(--Color-OpenCX-Dune-Lightest, #F8F6F0) !important;
	}

	.ocx-header .ocx-header__row,
	.ocx-header--home .ocx-header__row,
	.ocx-header--ecosystem .ocx-header__row,
	.ocx-header--solution .ocx-header__row,
	.ocx-header--industries .ocx-header__row {
		width: 100% !important;
		max-width: 100% !important;
		height: 100% !important;
		display: flex !important;
		flex-direction: row !important;
		align-items: center !important;
		justify-content: space-between !important;
		align-self: stretch !important;
		margin: 0 !important;
		padding: var(--Section-Padding-padding-section-none, 0) var(--Section-Padding-padding-section-xsmall, 16px) !important;
		box-sizing: border-box !important;
	}

	/* Logo on Mobile (Left) - Figma #12478:20536 & #12478:20498 */
	.ocx-header__logo,
	.ocx-header--home .ocx-header__logo,
	.ocx-header--ecosystem .ocx-header__logo,
	.ocx-header--solution .ocx-header__logo,
	.ocx-header--industries .ocx-header__logo {
		width: auto !important;
		height: auto !important;
		flex: 0 0 auto !important;
		display: flex !important;
		align-items: center !important;
		padding: 10px 0 0 0 !important;
		margin: 0 !important;
	}

	.ocx-header__logo-link {
		display: inline-flex !important;
		align-items: center !important;
		text-decoration: none !important;
		line-height: 0 !important;
	}

	.ocx-header__logo-img {
		width: 168px !important;
		height: 38px !important;
		max-width: 168px !important;
		max-height: 38px !important;
		object-fit: contain !important;
		display: block !important;
	}

	.ocx-header__logo .wp-block-site-logo {
		width: 168px !important;
		height: 38px !important;
		display: block !important;
	}

	/* Hide Desktop Elements on Mobile */
	.ocx-header .ocx-header__track,
	.ocx-header .ocx-nav--menu,
	.ocx-header--home .ocx-nav--menu,
	.ocx-header .ocx-header__actions,
	.ocx-header--home .ocx-header__actions,
	.ocx-header .wp-block-buttons,
	.ocx-header--ecosystem .ocx-header__col {
		display: none !important;
	}

	/* Sandwich Toggle Button (Right) - Figma #12478:20565 (24x24) */
	.ocx-mobile-toggle {
		display: inline-flex !important;
		align-items: center !important;
		justify-content: center !important;
		width: 24px !important;
		height: 24px !important;
		min-width: 24px !important;
		min-height: 24px !important;
		padding: 0 !important;
		margin: 0 !important;
		background: transparent !important;
		border: none !important;
		cursor: pointer !important;
		color: #162227 !important;
		z-index: 10001 !important;
		flex-shrink: 0 !important;
		outline: none !important;
	}

	.ocx-mobile-toggle .ocx-icon-hamburger {
		display: block !important;
		width: 24px !important;
		height: 24px !important;
	}

	.ocx-mobile-toggle .ocx-icon-close {
		display: none !important;
		width: 24px !important;
		height: 24px !important;
	}

	.ocx-mobile-toggle.is-active .ocx-icon-hamburger {
		display: none !important;
	}

	.ocx-mobile-toggle.is-active .ocx-icon-close {
		display: block !important;
	}

	/* Mobile Drawer Menu */
	.ocx-mobile-drawer {
		display: none;
		position: fixed !important;
		top: 120px !important;
		left: 0 !important;
		right: 0 !important;
		bottom: 0 !important;
		width: 100vw !important;
		height: calc(100dvh - 120px) !important;
		background-color: var(--Color-OpenCX-Dune-Lightest, #F8F6F0) !important;
		z-index: 10000 !important;
		padding: 24px 20px 48px !important;
		box-sizing: border-box !important;
		overflow-y: auto !important;
		-webkit-overflow-scrolling: touch;
		flex-direction: column !important;
		justify-content: space-between !important;
	}

	.page-industries .ocx-mobile-drawer,
	.ocx-header--industries .ocx-mobile-drawer {
		background-color: var(--Color-OpenCX-White, #FCFBF9) !important;
	}

	.ocx-mobile-drawer.is-open {
		display: flex !important;
		animation: ocxDrawerFadeIn 0.25s cubic-bezier(0.16, 1, 0.3, 1) forwards;
	}

	@keyframes ocxDrawerFadeIn {
		from {
			opacity: 0;
			transform: translateY(-8px);
		}
		to {
			opacity: 1;
			transform: translateY(0);
		}
	}

	.ocx-mobile-nav {
		display: flex !important;
		flex-direction: column !important;
		width: 100% !important;
	}

	.ocx-mobile-nav__list {
		list-style: none !important;
		margin: 0 !important;
		padding: 0 !important;
		display: flex !important;
		flex-direction: column !important;
		width: 100% !important;
	}

	.ocx-mobile-nav__item {
		width: 100% !important;
		border-bottom: 0.5px solid rgba(203, 187, 133, 0.5) !important;
	}

	.ocx-mobile-nav__link {
		display: flex !important;
		align-items: center !important;
		justify-content: space-between !important;
		padding: 16px 0 !important;
		font-family: var(--wp--preset--font-family--widescreen, "widescreen", sans-serif) !important;
		font-size: 18px !important;
		font-weight: 400 !important;
		color: #162227 !important;
		text-decoration: none !important;
		transition: opacity 0.15s ease;
	}

	.ocx-mobile-nav__link:hover {
		opacity: 0.7;
	}

	.ocx-mobile-nav__link--active span {
		color: var(--Color-OpenCX-Dune, #B69E52) !important;
	}

	.ocx-mobile-nav__row {
		display: flex !important;
		align-items: center !important;
		justify-content: space-between !important;
		width: 100% !important;
	}

	.ocx-mobile-nav__row .ocx-mobile-nav__link {
		flex: 1 1 auto !important;
	}

	.ocx-mobile-nav__toggle {
		background: transparent !important;
		border: none !important;
		padding: 14px 10px !important;
		margin: 0 !important;
		cursor: pointer !important;
		display: inline-flex !important;
		align-items: center !important;
		justify-content: center !important;
		color: #162227 !important;
		flex-shrink: 0 !important;
	}

	.ocx-mobile-nav__plus {
		width: 18px !important;
		height: 18px !important;
		opacity: 0.7;
		transition: transform 0.28s cubic-bezier(0.25, 1, 0.5, 1), opacity 0.2s ease !important;
	}

	.ocx-mobile-nav__item.is-open .ocx-mobile-nav__plus {
		transform: rotate(45deg) !important;
		opacity: 1 !important;
	}

	.ocx-mobile-nav__submenu {
		display: none !important;
		list-style: none !important;
		margin: 0 !important;
		padding: 0 0 16px 16px !important;
		flex-direction: column !important;
		gap: 6px !important;
		width: 100% !important;
	}

	.ocx-mobile-nav__item.is-open .ocx-mobile-nav__submenu {
		display: flex !important;
	}

	.ocx-mobile-nav__subitem {
		list-style: none !important;
		margin: 0 !important;
		padding: 0 !important;
		width: 100% !important;
	}

	.ocx-mobile-nav__sublink {
		display: block !important;
		font-family: var(--wp--preset--font-family--widescreen, "widescreen", sans-serif) !important;
		font-size: 15px !important;
		font-weight: 400 !important;
		color: #162227 !important;
		text-decoration: none !important;
		padding: 8px 12px !important;
		border-radius: 8px !important;
		transition: color 0.18s ease, background-color 0.18s ease, transform 0.18s ease !important;
	}

	.ocx-mobile-nav__sublink:hover,
	.ocx-mobile-nav__sublink:focus,
	.ocx-mobile-nav__sublink:active {
		color: var(--Color-OpenCX-Dune, #B69E52) !important;
		background-color: var(--Color-OpenCX-Dune-Lightest, #F8F6F0) !important;
		transform: translateX(4px) !important;
	}

	.ocx-mobile-nav__sublink--active {
		color: var(--Color-OpenCX-Dune, #B69E52) !important;
		font-weight: 500 !important;
	}

	.ocx-mobile-nav__actions {
		display: flex !important;
		flex-direction: column !important;
		gap: 12px !important;
		margin-top: 32px !important;
		padding-top: 16px !important;
		width: 100% !important;
	}

	.ocx-btn-mobile--secondary {
		display: none !important; /* Oculto a pedido del usuario (no eliminado) */
		align-items: center !important;
		justify-content: center !important;
		width: 100% !important;
		height: 48px !important;
		background: #FCFBF9 !important;
		border: 1px solid var(--Color-OpenCX-Dune-Light, #CBBB85) !important;
		border-radius: 0 0 12px 0 !important;
		color: #162227 !important;
		font-family: var(--wp--preset--font-family--widescreen, "widescreen", sans-serif) !important;
		font-size: 16px !important;
		font-weight: 400 !important;
		text-decoration: none !important;
		box-sizing: border-box !important;
	}

	.ocx-btn-mobile--primary {
		display: flex !important;
		align-items: center !important;
		justify-content: center !important;
		width: 100% !important;
		height: 48px !important;
		background: var(--Color-OpenCX-Dune, #B69E52) !important;
		border: 1px solid var(--Color-OpenCX-Dune, #B69E52) !important;
		border-radius: 0 !important;
		color: #FCFBF9 !important;
		font-family: var(--wp--preset--font-family--widescreen, "widescreen", sans-serif) !important;
		font-size: 16px !important;
		font-weight: 300 !important;
		text-decoration: none !important;
		box-sizing: border-box !important;
	}

	/* --------------------------------------------------------------------------
	   2. HERO HOME (Mobile & Tablet - Figma #12478:17157 "Hero home")
	   -------------------------------------------------------------------------- */
	.ocx-hero {
		display: flex !important;
		flex-direction: column !important;
		align-items: center !important;
		gap: 10px !important;
		align-self: stretch !important;
		padding: var(--Section-Padding-padding-section-xsmall, 16px) 10px 0 10px !important;
		width: 100% !important;
		background: var(--Color-OpenCX-Dune-Lightest, #F8F6F0) !important;
		box-sizing: border-box !important;
	}

	.ocx-hero__container {
		display: block !important;
		width: 100% !important;
		max-width: 100% !important;
		height: auto !important;
		min-height: auto !important;
		margin: 0 auto !important;
		padding: 0 !important;
		border: var(--Stroke-Hairline, 0.5px) solid var(--Color-Blackberry-Light, #8F459C) !important;
		background: var(--Color-OpenCX-White, #FCFBF9) !important;
		border-radius: 0 !important;
		box-sizing: border-box !important;
	}

	.ocx-hero__frame {
		display: flex !important;
		height: 533px !important;
		min-height: auto !important;
		width: calc(100% + 1px) !important;
		max-width: none !important;
		flex-direction: column !important;
		justify-content: center !important;
		align-items: center !important;
		gap: 80px !important;
		align-self: stretch !important;
		border-radius: var(--Radius-Small, 16px) !important;
		border: var(--Stroke-Hairline, 0.5px) solid var(--Color-OpenCX-Dune-Light, #CBBB85) !important;
		background: var(--Color-Amber, #F2EEE1) !important;
		padding: 0 !important;
		margin: -0.5px !important;
		box-sizing: border-box !important;
	}

	.ocx-hero__logo-frame {
		display: none !important;
	}

	.ocx-hero__column {
		display: flex !important;
		height: 348px !important;
		flex-direction: column !important;
		justify-content: space-between !important;
		align-items: center !important;
		flex-shrink: 0 !important;
		align-self: stretch !important;
		border-radius: 16px !important;
		width: 100% !important;
		max-width: 349px !important;
		padding: 0 !important;
		margin: 0 auto !important;
		box-sizing: border-box !important;
		gap: 0 !important;
	}

	.ocx-hero__actions {
		width: 100% !important;
		height: 100% !important;
		max-width: 100% !important;
		padding: 0 !important;
		margin: 0 !important;
		display: flex !important;
		flex-direction: column !important;
		align-items: center !important;
		justify-content: space-between !important;
	}

	.ocx-hero__form {
		width: 100% !important;
		height: 100% !important;
		max-width: 100% !important;
		min-height: 0 !important;
		background: transparent !important;
		border: none !important;
		border-radius: 0 !important;
		padding: 0 !important;
		margin: 0 !important;
		box-shadow: none !important;
		display: flex !important;
		flex-direction: column !important;
		justify-content: space-between !important;
		align-items: center !important;
	}

	.ocx-hero__field {
		width: 100% !important;
		max-width: 300px !important;
		margin: 0 auto !important;
		padding: 0 !important;
		font-family: 'Widescreen', sans-serif !important;
		font-weight: 400 !important;
		font-size: 16px !important;
		line-height: 1.5em !important;
		text-align: center !important;
		color: #162227 !important;
	}

	.ocx-hero__controls {
		width: 100% !important;
		display: flex !important;
		flex-direction: column !important;
		align-items: center !important;
		gap: 32px !important;
		padding: 0 !important;
		margin: 0 !important;
	}

	.ocx-hero__right-tools {
		order: 1 !important;
		width: 349px !important;
		max-width: 100% !important;
		height: 80px !important;
		background: #FCFBF9 !important;
		border: 1px solid #F0EBDC !important;
		border-radius: 100px !important;
		display: flex !important;
		align-items: center !important;
		justify-content: flex-end !important;
		padding: 0 20px !important;
		box-sizing: border-box !important;
		gap: 12px !important;
	}

	.wp-block-button.ocx-hero__mic,
	.ocx-hero__mic {
		display: none !important;
		margin: 0 !important;
	}

	.ocx-hero__mic .wp-block-button__link {
		background: transparent !important;
		border: none !important;
		padding: 0 !important;
		display: flex !important;
		align-items: center !important;
		justify-content: center !important;
	}

	.ocx-hero__mic .ocx-hero__mic-icon {
		width: 24px !important;
		height: 24px !important;
		display: block !important;
	}

	.ocx-hero__submit {
		margin: 0 !important;
		display: flex !important;
		align-items: center !important;
	}

	.ocx-hero__submit .wp-block-button__link {
		width: 36px !important;
		height: 36px !important;
		border-radius: 50% !important;
		background: transparent !important;
		display: flex !important;
		align-items: center !important;
		justify-content: center !important;
		padding: 0 !important;
		border: none !important;
		box-sizing: border-box !important;
	}

	.ocx-hero__submit .ocx-hero__arrow {
		width: 36px !important;
		height: 36px !important;
		display: block !important;
	}

	.ocx-hero__industry {
		order: 2 !important;
		width: auto !important;
		margin: 0 auto !important;
	}

	.ocx-hero__industry .wp-block-button__link {
		width: 200px !important;
		padding: 8px 20px !important;
		background: transparent !important;
		border: none !important;
		border-bottom: 1px solid #B69E52 !important;
		border-radius: 0 !important;
		color: #B69E52 !important;
		font-family: 'Widescreen', sans-serif !important;
		font-weight: 400 !important;
		font-size: 16px !important;
		line-height: 1.65em !important;
		display: flex !important;
		align-items: center !important;
		justify-content: center !important;
		gap: 5px !important;
		box-sizing: border-box !important;
		text-decoration: none !important;
	}

	.ocx-hero__industry .ocx-hero__plus-icon {
		display: none !important;
	}

	.ocx-hero__industry .wp-block-button__link::after {
		content: '' !important;
		display: inline-block !important;
		width: 25px !important;
		height: 25px !important;
		background: url('../images/hero-chevron-down.svg') no-repeat center center !important;
		background-size: contain !important;
		flex-shrink: 0 !important;
	}

	/* Mobile styles for active pill selection */
	.ocx-hero__industry .wp-block-button__link.has-selection {
		width: auto !important;
		max-width: 90vw !important;
		border: 1px solid #B69E52 !important;
		border-radius: 9999px !important;
		background: #FAF8F4 !important;
		padding: 6px 14px !important;
	}

	.ocx-hero__industry .wp-block-button__link.has-selection::after {
		content: none !important;
		display: none !important;
	}

	/* Mobile styles for popover tray */
	.ocx-hero__industry-popover {
		left: 50% !important;
		top: auto !important;
		bottom: calc(100% + 14px) !important;
		transform: translateX(-50%) translateY(8px) scale(0.97) !important;
		width: min(340px, 92vw) !important;
		padding: 14px !important;
	}

	.ocx-hero__industry-popover.is-open {
		transform: translateX(-50%) translateY(0) scale(1) !important;
	}

	.ocx-hero__industry-chips {
		justify-content: center !important;
	}

	/* Tablet adaptation (576px to 991.98px) */
	@media (min-width: 576px) and (max-width: 991.98px) {
		.ocx-hero {
			padding: var(--Section-Padding-padding-section-small, 32px) 10px 0 10px !important;
		}

		.ocx-hero__container {
			max-width: 100% !important;
			width: 100% !important;
		}

		.ocx-hero__frame {
			max-width: none !important;
			width: calc(100% + 1px) !important;
			margin: -0.5px !important;
			padding: 0 32px !important;
		}

		.ocx-hero__column {
			max-width: 520px !important;
			width: 100% !important;
		}

		.ocx-hero__field {
			max-width: 480px !important;
			font-size: 18px !important;
			line-height: 1.55em !important;
		}

		.ocx-hero__right-tools {
			width: 100% !important;
			max-width: 480px !important;
		}
	}

	/* --------------------------------------------------------------------------
	   3. TEXTURED DIVIDERS
	   Figma: "Textured Divider mobile" #12478:21372 (Mobile & Tablet)
	   -------------------------------------------------------------------------- */
	.ocx-textured-divider {
		display: flex !important;
		justify-content: center !important;
		align-items: center !important;
		width: 100% !important;
		height: 80px !important;
		min-height: 80px !important;
		padding: 0 10px !important;
		background-color: var(--Color-OpenCX-Dune-Lightest, #F8F6F0) !important;
		box-sizing: border-box !important;
	}

	.ocx-textured-divider--variant-2,
	.ocx-textured-divider[data-variant="2"],
	.page-id-61 .ocx-textured-divider,
	.page-template-page-ecosystem .ocx-textured-divider {
		background-color: var(--Color-OpenCX-White, #FCFBF9) !important;
	}

	.ocx-textured-divider__container {
		display: block !important;
		width: 100% !important;
		max-width: 100% !important;
		height: 80px !important;
		min-height: 80px !important;
		margin: 0 auto !important;
		border-left: var(--Stroke-Hairline, 0.5px) solid var(--Color-OpenCX-Dune-Light, #CBBB85) !important;
		border-right: var(--Stroke-Hairline, 0.5px) solid var(--Color-OpenCX-Dune-Light, #CBBB85) !important;
		border-top: none !important;
		border-bottom: none !important;
		box-sizing: border-box !important;
		background-image: url('../images/pattern-tile.svg') !important;
		background-repeat: repeat !important;
		background-size: 60px 60px !important;
	}

	.ocx-textured-divider:not(:has(.ocx-textured-divider__container)) {
		width: 100% !important;
		max-width: 100% !important;
		margin: 0 auto !important;
		border-left: var(--Stroke-Hairline, 0.5px) solid var(--Color-OpenCX-Dune-Light, #CBBB85) !important;
		border-right: var(--Stroke-Hairline, 0.5px) solid var(--Color-OpenCX-Dune-Light, #CBBB85) !important;
		background-image: url('../images/pattern-tile.svg') !important;
		background-repeat: repeat !important;
		background-size: 60px 60px !important;
	}

	@media (min-width: 576px) and (max-width: 991.98px) {
		.ocx-textured-divider {
			padding: 0 10px !important;
		}

		.ocx-textured-divider__container {
			max-width: 100% !important;
		}

		.ocx-textured-divider:not(:has(.ocx-textured-divider__container)) {
			max-width: 100% !important;
		}
	}

	/*
	 * En desktop hay un Textured Divider entre CTA Roadmap y Business Outcomes,
	 * pero en el frame mobile de Figma los dos bloques van seguidos. Va con
	 * `!important` porque la regla base de §3 ya lo trae.
	 */
	.ocx-cta-roadmap + .ocx-textured-divider {
		display: none !important;
	}

	/* --------------------------------------------------------------------------
	   4. VALUE PROPOSITION (.ocx-value-prop / .ocx-h90)
	   Figma: "Hero - Value proposition" #12478:17179 (Mobile & Tablet)
	   -------------------------------------------------------------------------- */
	.ocx-value-prop {
		padding: 0 10px !important;
		width: 100% !important;
		background-color: var(--Color-OpenCX-Dune-Lightest, #F8F6F0) !important;
		display: flex !important;
		justify-content: center !important;
		align-items: center !important;
		box-sizing: border-box !important;
	}

	.ocx-h90__outer {
		display: block !important;
		width: 100% !important;
		max-width: 100% !important;
		height: auto !important;
		min-height: auto !important;
		margin: 0 auto !important;
		padding: 0 !important;
		background: var(--Color-OpenCX-Dune-Light, #CBBB85) !important;
		border: var(--Stroke-Hairline, 0.5px) solid var(--Color-OpenCX-Dune-Light, #CBBB85) !important;
		border-radius: 0 !important;
		position: relative !important;
		box-sizing: border-box !important;
	}

	.ocx-h90__container {
		position: relative !important;
		display: flex !important;
		flex-direction: column !important;
		justify-content: center !important;
		align-items: center !important;
		gap: 80px !important;
		width: calc(100% + 1px) !important;
		max-width: none !important;
		height: auto !important;
		min-height: auto !important;
		margin: -0.5px !important;
		padding: var(--Section-Padding-padding-section-small, 32px) var(--Section-Padding-padding-section-xsmall, 16px) !important;
		border-radius: var(--Radius-Small, 16px) !important;
		border: var(--Stroke-Hairline, 0.5px) solid var(--Color-OpenCX-Dune-Light, #CBBB85) !important;
		background: var(--Color-OpenCX-White, #FCFBF9) !important;
		box-sizing: border-box !important;
	}

	.ocx-h90__card {
		display: flex !important;
		flex-direction: column !important;
		align-items: center !important;
		gap: 33px !important;
		align-self: stretch !important;
		width: 100% !important;
		min-height: auto !important;
		border-radius: var(--Radius-Small, 16px) !important;
		box-sizing: border-box !important;
	}

	/* Reorder children inside Card: 1. Text Column, 2. Image Column, 3. Actions Button */
	.ocx-h90__column--left {
		display: contents !important;
	}

	.ocx-h90__content {
		order: 1 !important;
		display: flex !important;
		flex-direction: column !important;
		align-items: flex-start !important;
		gap: 24px !important;
		align-self: stretch !important;
		width: 100% !important;
		box-sizing: border-box !important;
	}

	.ocx-h90__column--right {
		order: 2 !important;
		display: flex !important;
		flex-direction: column !important;
		justify-content: center !important;
		align-items: center !important;
		gap: 32px !important;
		align-self: stretch !important;
		width: 100% !important;
		margin: 0 !important;
		padding: 0 !important;
		box-sizing: border-box !important;
	}

	.ocx-h90__column--left .wp-block-buttons {
		order: 3 !important;
		display: flex !important;
		align-items: flex-start !important;
		justify-content: center !important;
		gap: 16px !important;
		align-self: stretch !important;
		width: 100% !important;
		margin: 0 !important;
		padding: 0 !important;
	}

	.ocx-h90__card .wp-block-heading {
		font-family: var(--wp--preset--font-family--widescreen-ex, "widescreen-ex", var(--wp--preset--font-family--widescreen, "Widescreen", sans-serif)) !important;
		font-size: 36px !important;
		font-weight: 400 !important;
		line-height: 1em !important;
		letter-spacing: -0.03em !important;
		color: #162227 !important;
		text-align: left !important;
		margin: 0 !important;
	}

	.ocx-h90__card .wp-block-heading .ocx-blackberry {
		color: var(--Color-Blackberry-Light, #8F459C) !important;
		font-family: var(--wp--preset--font-family--widescreen-ex, "widescreen-ex", sans-serif) !important;
		letter-spacing: -0.03em !important;
	}

	.ocx-h90__card p {
		font-family: var(--wp--preset--font-family--widescreen, "Widescreen", sans-serif) !important;
		font-size: 16px !important;
		font-weight: 300 !important;
		line-height: 1.5em !important;
		letter-spacing: 0 !important;
		color: #162227 !important;
		text-align: left !important;
		margin: 0 !important;
	}

	.ocx-h90__image {
		width: 285px !important;
		max-width: 100% !important;
		height: 392px !important;
		margin: 0 auto !important;
		display: flex !important;
		align-items: center !important;
		justify-content: center !important;
	}

	.ocx-h90__image img {
		width: 285px !important;
		max-width: 100% !important;
		height: 392px !important;
		max-height: 392px !important;
		object-fit: contain !important;
		margin: 0 auto !important;
		display: block !important;
	}

	.ocx-h90__card .ocx-btn--dune {
		width: auto !important;
		max-width: none !important;
		margin: 0 auto !important;
	}

	.ocx-h90__card .ocx-btn--dune .wp-block-button__link {
		display: inline-flex !important;
		align-items: center !important;
		justify-content: center !important;
		width: auto !important;
		min-width: 129px !important;
		height: 44px !important;
		padding: 10px 24px !important;
		white-space: nowrap !important;
		background: var(--Color-OpenCX-Dune-Lighter, #F0EBDC) !important;
		border: 1px solid var(--Color-OpenCX-Dune-Light, #CBBB85) !important;
		border-radius: 0 !important;
		color: var(--Color-OpenCX-Dune, #B69E52) !important;
		font-family: var(--wp--preset--font-family--widescreen, "Widescreen", sans-serif) !important;
		font-size: 16px !important;
		font-weight: 300 !important;
		line-height: 24px !important;
		text-decoration: none !important;
		box-sizing: border-box !important;
	}

	/* Tablet adaptation for Value Proposition (576px to 991.98px) */
	@media (min-width: 576px) and (max-width: 991.98px) {
		.ocx-value-prop {
			padding: var(--Section-Padding-padding-section-small, 32px) 10px 0 10px !important;
		}

		.ocx-h90__outer {
			max-width: 100% !important;
			width: 100% !important;
			min-height: auto !important;
			height: auto !important;
		}

		.ocx-h90__container {
			padding: 40px 32px !important;
			gap: 40px !important;
			border-radius: var(--Radius-Small, 16px) !important;
			border: var(--Stroke-Hairline, 0.5px) solid var(--Color-OpenCX-Dune-Light, #CBBB85) !important;
			background: var(--Color-OpenCX-White, #FCFBF9) !important;
			width: calc(100% + 1px) !important;
			margin: -0.5px !important;
		}

		.ocx-h90__card {
			max-width: 600px !important;
			gap: 36px !important;
		}

		.ocx-h90__card .wp-block-heading {
			font-size: 40px !important;
			line-height: 1.1em !important;
		}

		.ocx-h90__card p {
			font-size: 17px !important;
			line-height: 1.55em !important;
		}

		.ocx-h90__image {
			width: 320px !important;
			max-width: 100% !important;
			height: auto !important;
		}

		.ocx-h90__image img {
			width: 320px !important;
			max-width: 100% !important;
			height: auto !important;
			max-height: 440px !important;
		}
	}

	/* --------------------------------------------------------------------------
	   5. PROBLEM SECTION (.ocx-problem)
	   Figma: "Problem" #12478:17193 (Mobile & Tablet)
	   -------------------------------------------------------------------------- */
	.ocx-problem {
		padding: 0 10px !important;
		width: 100% !important;
		background-color: var(--Color-OpenCX-Dune-Lightest, #F8F6F0) !important;
		display: flex !important;
		justify-content: center !important;
		align-items: center !important;
		box-sizing: border-box !important;
	}

	.ocx-problem__container {
		display: block !important;
		width: 100% !important;
		max-width: 100% !important;
		height: auto !important;
		min-height: auto !important;
		margin: 0 auto !important;
		padding: 0 !important;
		border: var(--Stroke-Hairline, 0.5px) solid var(--Color-Blackberry-Light, #8F459C) !important;
		background: var(--Color-OpenCX-White, #FCFBF9) !important;
		border-radius: 0 !important;
		box-sizing: border-box !important;
	}

	.ocx-problem__component {
		display: flex !important;
		flex-direction: column !important;
		width: calc(100% + 1px) !important;
		margin: -0.5px !important;
		gap: -1px !important;
		box-sizing: border-box !important;
	}

	.ocx-problem__col--title {
		position: static !important;
		width: 100% !important;
		min-height: auto !important;
		height: auto !important;
		padding: 32px !important;
		background: var(--Color-OpenCX-Dune-Lightest, #F8F6F0) !important;
		border: var(--Stroke-Hairline, 0.5px) solid var(--Color-OpenCX-Dune-Light, #CBBB85) !important;
		border-radius: var(--Radius-Small, 16px) !important;
		box-sizing: border-box !important;
	}

	.ocx-problem__col--title .wp-block-heading {
		font-family: var(--wp--preset--font-family--widescreen, "Widescreen", sans-serif) !important;
		font-size: 32px !important;
		line-height: 1.2em !important;
		letter-spacing: -0.01em !important;
		color: var(--Color-OpenCX-Dune, #B69E52) !important;
		margin: 0 !important;
		text-align: left !important;
	}

	.ocx-problem__col--text {
		display: flex !important;
		flex-direction: column !important;
		justify-content: flex-end !important;
		gap: 32px !important;
		width: 100% !important;
		min-height: auto !important;
		height: auto !important;
		padding: 32px !important;
		background: var(--Color-OpenCX-Dune-Lightest, #F8F6F0) !important;
		border: var(--Stroke-Hairline, 0.5px) solid var(--Color-OpenCX-Dune-Light, #CBBB85) !important;
		border-radius: var(--Radius-Small, 16px) !important;
		margin-left: 0 !important;
		margin-top: 0 !important;
		box-sizing: border-box !important;
	}

	.ocx-problem__col--text p {
		font-family: var(--wp--preset--font-family--widescreen, "Widescreen", sans-serif) !important;
		font-size: 16px !important;
		line-height: 1.5em !important;
		color: #162227 !important;
		margin: 0 !important;
		text-align: left !important;
	}

	@media (min-width: 576px) and (max-width: 991.98px) {
		.ocx-problem {
			padding: 0 10px !important;
		}

		.ocx-problem__container {
			max-width: 100% !important;
		}

		.ocx-problem__col--title,
		.ocx-problem__col--text {
			padding: 40px !important;
		}

		.ocx-problem__col--title .wp-block-heading {
			font-size: 36px !important;
		}
	}

	/* --------------------------------------------------------------------------
	   6. MEET OPENCX (.ocx-meet)
	   Figma: "Meet OpenCX" #12478:17203 (Mobile & Tablet)
	   -------------------------------------------------------------------------- */
	.ocx-meet {
		padding: 0 10px !important;
		width: 100% !important;
		height: auto !important;
		min-height: auto !important;
		background-color: var(--Color-OpenCX-Dune-Lightest, #F8F6F0) !important;
		display: flex !important;
		justify-content: center !important;
		align-items: center !important;
		box-sizing: border-box !important;
	}

	.ocx-meet__container {
		display: block !important;
		width: 100% !important;
		max-width: 100% !important;
		height: auto !important;
		min-height: auto !important;
		margin: 0 auto !important;
		padding: 0 !important;
		border: var(--Stroke-Hairline, 0.5px) solid var(--Color-OpenCX-Dune-Light, #CBBB85) !important;
		background: var(--Color-OpenCX-Dune-Lighter, #F0EBDC) !important;
		border-radius: 0 !important;
		box-sizing: border-box !important;
	}

	.ocx-meet__card {
		display: flex !important;
		flex-direction: column !important;
		align-items: center !important;
		width: calc(100% + 1px) !important;
		height: auto !important;
		min-height: auto !important;
		margin: -0.5px !important;
		padding: 64px 0 64px !important;
		gap: 40px !important;
		border-radius: var(--Radius-Small, 16px) !important;
		border: var(--Stroke-Hairline, 0.5px) solid var(--Color-OpenCX-Dune-Light, #CBBB85) !important;
		background: var(--Color-Blackberry-Light, #8F459C) !important;
		box-sizing: border-box !important;
	}

	.ocx-meet__column--right {
		order: 1 !important;
		width: 100% !important;
		max-width: 100% !important;
		min-height: auto !important;
		height: auto !important;
		padding: 0 16px !important;
		display: flex !important;
		flex-direction: column !important;
		align-items: center !important;
		gap: 32px !important;
		box-sizing: border-box !important;
	}

	.ocx-meet__content {
		width: 100% !important;
		display: flex !important;
		flex-direction: column !important;
		align-items: flex-start !important;
		gap: 24px !important;
		padding: 0 !important;
		box-sizing: border-box !important;
	}

	.ocx-meet__content .wp-block-heading {
		font-family: var(--wp--preset--font-family--widescreen, "Widescreen", sans-serif) !important;
		font-size: 36px !important;
		font-weight: 400 !important;
		line-height: 1em !important;
		letter-spacing: -0.01em !important;
		color: #FCFBF9 !important;
		margin: 0 !important;
		text-align: left !important;
	}

	.ocx-meet__content .wp-block-heading span,
	.ocx-meet__content .wp-block-heading .ocx-meet__accent {
		color: var(--Color-OpenCX-Dune-Light, #CBBB85) !important;
		font-family: var(--wp--preset--font-family--widescreen-ex, "widescreen-ex", sans-serif) !important;
		font-size: 36px !important;
		line-height: 1em !important;
		letter-spacing: -0.03em !important;
	}

	.ocx-meet__content p {
		font-family: var(--wp--preset--font-family--widescreen, "Widescreen", sans-serif) !important;
		font-size: 16px !important;
		line-height: 1.5em !important;
		color: #FCFBF9 !important;
		margin: 0 !important;
		text-align: left !important;
	}

	.ocx-meet__column--right .wp-block-buttons {
		display: flex !important;
		justify-content: center !important;
		align-items: center !important;
		width: 100% !important;
		margin: 0 auto !important;
		padding: 0 !important;
	}

	.ocx-meet__column--right .ocx-btn--meet {
		width: auto !important;
		display: inline-flex !important;
		justify-content: center !important;
		margin: 0 auto !important;
	}

	.ocx-meet__column--right .ocx-btn--meet .wp-block-button__link {
		display: inline-flex !important;
		align-items: center !important;
		justify-content: center !important;
		width: auto !important;
		min-width: 129px !important;
		height: 44px !important;
		padding: 10px 24px !important;
		white-space: nowrap !important;
		background: var(--Color-OpenCX-Dune, #B69E52) !important;
		border: 1px solid var(--Color-OpenCX-Dune, #B69E52) !important;
		border-radius: 0 !important;
		color: #FCFBF9 !important;
		font-family: var(--wp--preset--font-family--widescreen, "Widescreen", sans-serif) !important;
		font-size: 16px !important;
		font-weight: 400 !important;
		line-height: 24px !important;
		text-decoration: none !important;
	}

	.ocx-meet__graphic {
		order: 2 !important;
		width: 280px !important;
		max-width: 280px !important;
		height: 280px !important;
		max-height: 280px !important;
		min-height: auto !important;
		margin: 0 auto !important;
		display: flex !important;
		justify-content: center !important;
		align-items: center !important;
		box-sizing: border-box !important;
	}

	.ocx-meet__graphic .wp-block-image,
	.ocx-meet__graphic figure {
		width: 280px !important;
		max-width: 280px !important;
		height: 280px !important;
		max-height: 280px !important;
		min-height: auto !important;
		margin: 0 auto !important;
		display: flex !important;
		justify-content: center !important;
		align-items: center !important;
		box-sizing: border-box !important;
	}

	.ocx-meet__graphic img {
		width: 280px !important;
		max-width: 280px !important;
		height: 280px !important;
		max-height: 280px !important;
		min-height: auto !important;
		object-fit: contain !important;
		display: block !important;
		margin: 0 auto !important;
	}

	@media (min-width: 576px) and (max-width: 991.98px) {
		.ocx-meet {
			padding: var(--Section-Padding-padding-section-small, 32px) 10px 0 10px !important;
		}

		.ocx-meet__container {
			max-width: 100% !important;
		}

		.ocx-meet__card {
			width: calc(100% + 1px) !important;
			margin: -0.5px !important;
			padding: 48px 32px !important;
			gap: 40px !important;
		}

		.ocx-meet__content .wp-block-heading {
			font-size: 40px !important;
		}
	}

	/* --------------------------------------------------------------------------
	   7. HOW IT WORKS (.ocx-how-it-works)
	   Figma: "How It Works" #12478:17496 (Mobile & Tablet)
	   -------------------------------------------------------------------------- */
	.ocx-how-it-works {
		padding: 0 10px !important;
		width: 100% !important;
		background-color: var(--Color-OpenCX-Dune-Lightest, #F8F6F0) !important;
		display: flex !important;
		justify-content: center !important;
		align-items: center !important;
		box-sizing: border-box !important;
	}

	.ocx-how-it-works__outer {
		width: 100% !important;
		max-width: 100% !important;
		height: auto !important;
		min-height: auto !important;
		margin: 0 auto !important;
		padding: 0 !important;
		border: var(--Stroke-Hairline, 0.5px) solid var(--Color-OpenCX-Dune-Light, #CBBB85) !important;
		background: var(--Color-OpenCX-White, #FCFBF9) !important;
		border-radius: 0 !important;
		box-sizing: border-box !important;
	}

	.ocx-how-it-works__card {
		width: calc(100% + 1px) !important;
		height: auto !important;
		min-height: auto !important;
		margin: -0.5px !important;
		padding: 49px 0 !important;
		display: flex !important;
		flex-direction: column !important;
		align-items: stretch !important;
		gap: 48px !important;
		border-radius: var(--Radius-Small, 16px) !important;
		border: var(--Stroke-Hairline, 0.5px) solid var(--Color-OpenCX-Dune-Light, #CBBB85) !important;
		background: var(--Color-OpenCX-Dune-Lightest, #F8F6F0) !important;
		box-sizing: border-box !important;
	}

	.ocx-how-it-works__header {
		width: 100% !important;
		padding: 0 10px !important;
	}

	.ocx-how-it-works__heading {
		font-family: var(--wp--preset--font-family--widescreen, "Widescreen", sans-serif) !important;
		font-size: 36px !important;
		font-weight: 400 !important;
		line-height: 1em !important;
		letter-spacing: -0.01em !important;
		color: #162227 !important;
		margin: 0 !important;
		padding: 0 16px !important;
		text-align: left !important;
		box-sizing: border-box !important;
	}

	.ocx-how-it-works__accent {
		color: var(--Color-OpenCX-Dune, #B69E52) !important;
		font-family: var(--wp--preset--font-family--widescreen, "Widescreen", sans-serif) !important;
		letter-spacing: -0.03em !important;
	}

	.ocx-how-it-works__body {
		display: flex !important;
		flex-direction: column !important;
		width: 100% !important;
		gap: 16px !important;
		padding: 0 !important;
		box-sizing: border-box !important;
	}

	.ocx-how-it-works__media-col {
		width: calc(100% - 20px) !important;
		max-width: none !important;
		height: 288px !important;
		flex: none !important;
		margin: 0 10px !important;
		background: var(--Color-OpenCX-White, #FCFBF9) !important;
		border: var(--Stroke-Hairline, 0.5px) solid var(--Color-OpenCX-Dune-Light, #CBBB85) !important;
		border-radius: var(--Radius-Small, 16px) !important;
		padding: 0 !important;
		display: flex !important;
		justify-content: center !important;
		align-items: center !important;
		box-sizing: border-box !important;
		overflow: hidden !important;
	}

	.ocx-how-it-works__image {
		width: 100% !important;
		max-width: 288px !important;
		height: 288px !important;
		margin: 0 auto !important;
		display: flex !important;
		justify-content: center !important;
		align-items: center !important;
	}

	.ocx-how-it-works__image img {
		width: 288px !important;
		max-width: 288px !important;
		height: 288px !important;
		object-fit: cover !important;
		display: block !important;
	}

	.ocx-how-it-works__text-col {
		width: 100% !important;
		max-width: none !important;
		flex: none !important;
		background: transparent !important;
		border: none !important;
		border-radius: 0 !important;
		padding: 0 !important;
		display: flex !important;
		flex-direction: column !important;
		gap: 48px !important;
		box-sizing: border-box !important;
	}

	.ocx-how-it-works__paragraphs {
		width: calc(100% - 20px) !important;
		margin: 0 10px !important;
		background: var(--Color-OpenCX-White, #FCFBF9) !important;
		border: var(--Stroke-Hairline, 0.5px) solid var(--Color-OpenCX-Dune-Light, #CBBB85) !important;
		border-radius: var(--Radius-Small, 16px) !important;
		padding: 32px 20px !important;
		display: flex !important;
		flex-direction: column !important;
		gap: 24px !important;
		box-sizing: border-box !important;
	}

	.ocx-how-it-works__paragraphs p {
		font-family: var(--wp--preset--font-family--widescreen, "Widescreen", sans-serif) !important;
		font-size: 16px !important;
		line-height: 1.5em !important;
		color: #162227 !important;
		margin: 0 !important;
		text-align: left !important;
	}

	.ocx-how-it-works__actions {
		display: flex !important;
		flex-direction: row !important;
		justify-content: space-between !important;
		align-items: center !important;
		width: 100% !important;
		padding: 0 32px !important;
		margin: 0 !important;
		box-sizing: border-box !important;
	}

	.ocx-how-it-works__actions .ocx-link-dune {
		font-family: var(--wp--preset--font-family--widescreen, "Widescreen", sans-serif) !important;
		font-size: 16px !important;
		font-weight: 400 !important;
		line-height: 1.5em !important;
		color: var(--Color-OpenCX-Dune, #B69E52) !important;
		text-decoration: none !important;
		display: inline-flex !important;
		align-items: center !important;
		gap: 8px !important;
		border-radius: 0 12px 0 0 !important;
	}

	.ocx-how-it-works__actions .ocx-link-dune__chevron {
		width: 6px !important;
		height: 12px !important;
	}

	@media (min-width: 576px) and (max-width: 991.98px) {
		.ocx-how-it-works {
			padding: var(--Section-Padding-padding-section-small, 32px) 10px 0 10px !important;
		}

		.ocx-how-it-works__outer {
			max-width: 100% !important;
		}

		.ocx-how-it-works__card {
			padding: 40px 32px !important;
		}

		.ocx-how-it-works__heading {
			font-size: 38px !important;
		}
	}

	/* --------------------------------------------------------------------------
	   8. WHY OPENCX (.ocx-why)
	   Figma: "Why OpenCX" #12478:17517 (Mobile & Tablet)
	   -------------------------------------------------------------------------- */
	.ocx-why {
		padding: 0 10px !important;
		width: 100% !important;
		background-color: var(--Color-OpenCX-Dune-Lightest, #F8F6F0) !important;
		display: flex !important;
		justify-content: center !important;
		align-items: center !important;
		box-sizing: border-box !important;
	}

	.ocx-why__outer {
		width: 100% !important;
		max-width: 100% !important;
		height: auto !important;
		min-height: auto !important;
		margin: 0 auto !important;
		padding: 0 !important;
		border: var(--Stroke-Hairline, 0.5px) solid var(--Color-OpenCX-Dune-Light, #CBBB85) !important;
		background: var(--Color-OpenCX-Dune-Lighter, #F0EBDC) !important;
		border-radius: 0 !important;
		box-sizing: border-box !important;
	}

	.ocx-why__card {
		display: flex !important;
		flex-direction: column !important;
		width: calc(100% + 1px) !important;
		height: auto !important;
		min-height: auto !important;
		margin: -0.5px !important;
		padding: 48px 32px !important;
		gap: 32px !important;
		border-radius: var(--Radius-Small, 16px) !important;
		border: var(--Stroke-Hairline, 0.5px) solid var(--Color-OpenCX-Dune-Light, #CBBB85) !important;
		background: #00C9C9 !important;
		box-sizing: border-box !important;
	}

	.ocx-why__col-left {
		width: 100% !important;
		padding: 0 !important;
		box-sizing: border-box !important;
	}

	.ocx-why__tagline {
		display: inline-flex !important;
		align-items: center !important;
		gap: 8px !important;
		margin-bottom: 16px !important;
	}

	.ocx-why__tagline-text {
		font-family: var(--wp--preset--font-family--widescreen, "Widescreen", sans-serif) !important;
		font-size: 22px !important;
		line-height: 1.5em !important;
		color: #162227 !important;
	}

	.ocx-why__heading {
		font-family: var(--wp--preset--font-family--widescreen, "Widescreen", sans-serif) !important;
		font-size: 36px !important;
		font-weight: 400 !important;
		line-height: 1em !important;
		letter-spacing: -0.01em !important;
		color: #162227 !important;
		margin: 0 0 24px 0 !important;
		text-align: left !important;
	}

	.ocx-why__heading-accent {
		font-family: var(--wp--preset--font-family--widescreen-ex, "widescreen-ex", sans-serif) !important;
		letter-spacing: -0.03em !important;
		color: #FCFBF9 !important;
	}

	.ocx-why__texture {
		display: none !important;
	}

	.ocx-why__actions .ocx-why__action-link {
		font-family: var(--wp--preset--font-family--widescreen, "Widescreen", sans-serif) !important;
		font-size: 16px !important;
		font-weight: 400 !important;
		color: #162227 !important;
		text-decoration: none !important;
		display: inline-flex !important;
		align-items: center !important;
		gap: 8px !important;
	}

	.ocx-why__timeline-card {
		width: 100% !important;
		background: #1C495A !important;
		border-radius: var(--Radius-Small, 16px) !important;
		padding: 32px !important;
		box-sizing: border-box !important;
	}

	.ocx-why__group-title {
		font-family: var(--wp--preset--font-family--widescreen, "Widescreen", sans-serif) !important;
		font-size: 24px !important;
		font-weight: 600 !important;
		line-height: 1.4em !important;
		letter-spacing: -0.01em !important;
		color: #00C9C9 !important;
		margin-bottom: 20px !important;
	}

	.ocx-why__item-title {
		font-family: var(--wp--preset--font-family--widescreen, "Widescreen", sans-serif) !important;
		font-size: 22px !important;
		font-weight: 300 !important;
		line-height: 1.4em !important;
		letter-spacing: -0.01em !important;
		color: #FCFBF9 !important;
	}

	.ocx-why__item-desc {
		font-family: var(--wp--preset--font-family--widescreen, "Widescreen", sans-serif) !important;
		font-size: 16px !important;
		line-height: 1.5em !important;
		color: #FCFBF9 !important;
		opacity: 0.9 !important;
	}

	@media (min-width: 576px) and (max-width: 991.98px) {
		.ocx-why {
			padding: var(--Section-Padding-padding-section-small, 32px) 10px 0 10px !important;
		}

		.ocx-why__outer {
			max-width: 100% !important;
		}

		.ocx-why__card {
			padding: 40px 32px !important;
		}

		.ocx-why__heading {
			font-size: 40px !important;
		}
	}

	/* --------------------------------------------------------------------------
	   9. CTA ROADMAP (.ocx-cta-roadmap)
	   Figma: "Call to action" #12478:19297 (Mobile & Tablet)
	   -------------------------------------------------------------------------- */
	.ocx-cta-roadmap {
		padding: 0 10px !important;
		width: 100% !important;
		background-color: var(--Color-OpenCX-Dune-Lightest, #F8F6F0) !important;
		display: flex !important;
		justify-content: center !important;
		align-items: center !important;
		box-sizing: border-box !important;
	}

	.ocx-cta-roadmap__outer {
		width: 100% !important;
		max-width: 100% !important;
		height: auto !important;
		min-height: auto !important;
		margin: 0 auto !important;
		border: var(--Stroke-Hairline, 0.5px) solid var(--Color-OpenCX-Dune-Light, #CBBB85) !important;
		background: var(--Color-OpenCX-White, #FCFBF9) !important;
		border-radius: 0 !important;
		box-sizing: border-box !important;
	}

	.ocx-cta-roadmap__component {
		display: flex !important;
		flex-direction: column !important;
		width: 100% !important;
		margin: 0 !important;
		gap: 24px !important;
		box-sizing: border-box !important;
	}

	.ocx-cta-roadmap__col--title {
		width: 100% !important;
		padding: 24px !important;
		background: var(--Color-OpenCX-Dune-Lightest, #F8F6F0) !important;
		border: var(--Stroke-Hairline, 0.5px) solid var(--Color-OpenCX-Dune-Light, #CBBB85) !important;
		border-radius: var(--Radius-Small, 16px) !important;
		box-sizing: border-box !important;
	}

	.ocx-cta-roadmap__tagline {
		font-family: var(--wp--preset--font-family--widescreen, "Widescreen", sans-serif) !important;
		font-size: 22px !important;
		line-height: 1.5em !important;
		color: #162227 !important;
		margin-bottom: 12px !important;
	}

	.ocx-cta-roadmap__dash {
		color: var(--Color-Blackberry-Light, #8F459C) !important;
	}

	.ocx-cta-roadmap__heading {
		font-family: var(--wp--preset--font-family--widescreen, "Widescreen", sans-serif) !important;
		font-size: 32px !important;
		line-height: 1.2em !important;
		letter-spacing: -0.01em !important;
		color: var(--Color-OpenCX-Dune, #B69E52) !important;
		margin: 0 !important;
		text-align: left !important;
	}

	.ocx-cta-roadmap__col--text {
		width: 100% !important;
		padding: 24px !important;
		background: var(--Color-OpenCX-Dune-Lightest, #F8F6F0) !important;
		border: var(--Stroke-Hairline, 0.5px) solid var(--Color-OpenCX-Dune-Light, #CBBB85) !important;
		border-radius: var(--Radius-Small, 16px) !important;
		display: flex !important;
		flex-direction: column !important;
		gap: 24px !important;
		box-sizing: border-box !important;
	}

	.ocx-cta-roadmap__desc {
		font-family: var(--wp--preset--font-family--widescreen, "Widescreen", sans-serif) !important;
		font-size: 16px !important;
		line-height: 1.5em !important;
		color: #162227 !important;
		margin: 0 !important;
	}

	.ocx-cta-roadmap__actions .ocx-link-dune {
		font-family: var(--wp--preset--font-family--widescreen, "Widescreen", sans-serif) !important;
		font-size: 16px !important;
		font-weight: 400 !important;
		line-height: 1.5em !important;
		color: var(--Color-OpenCX-Dune, #B69E52) !important;
		text-decoration: none !important;
		display: inline-flex !important;
		align-items: center !important;
		gap: 8px !important;
	}

	@media (min-width: 576px) and (max-width: 991.98px) {
		.ocx-cta-roadmap {
			padding: var(--Section-Padding-padding-section-small, 32px) 10px 0 10px !important;
		}

		.ocx-cta-roadmap__outer {
			max-width: 100% !important;
		}

		.ocx-cta-roadmap__col--title,
		.ocx-cta-roadmap__col--text {
			padding: 36px !important;
		}
	}

	/* --------------------------------------------------------------------------
	   10. BUSINESS OUTCOMES (.ocx-business-outcomes__section)
	   Figma: "Business Outcomes" #12478:19312 (Mobile & Tablet)
	   El padding de la seccion es solo horizontal (los 80px verticales vive
	   el Container #12478:19316, que ya los trae de la regla base).
	   -------------------------------------------------------------------------- */
	.ocx-business-outcomes__section {
		padding: 0 10px !important;
		width: 100% !important;
		background-color: var(--Color-OpenCX-Dune-Lightest, #F8F6F0) !important;
		box-sizing: border-box !important;
	}

	.ocx-business-outcomes__container {
		width: 100% !important;
		max-width: 100% !important;
		height: auto !important;
		margin: 0 auto !important;
		box-sizing: border-box !important;
	}

	.ocx-business-outcomes__header {
		width: 100% !important;
		padding: 0 0 32px !important;
		text-align: center !important;
		box-sizing: border-box !important;
	}

	.ocx-business-outcomes__heading {
		font-family: var(--wp--preset--font-family--widescreen, "Widescreen", sans-serif) !important;
		font-size: 36px !important;
		font-weight: 400 !important;
		line-height: 1em !important;
		letter-spacing: -0.01em !important;
		color: #162227 !important;
		text-align: center !important;
		margin: 0 !important;
	}

	.ocx-business-outcomes__heading-accent {
		color: var(--Color-OpenCX-Dune, #B69E52) !important;
		font-family: var(--wp--preset--font-family--widescreen-ex, "widescreen-ex", sans-serif) !important;
		font-size: 36px !important;
		font-weight: 400 !important;
		line-height: 1em !important;
		letter-spacing: -0.03em !important;
	}

	.ocx-business-outcomes__stats {
		width: 100% !important;
		display: flex !important;
		flex-direction: column !important;
		gap: 12px !important;
	}

	/* Figma draws the cyan hairline on the row (0.5px top+bottom), not on each
	   card: Row #12588:90290 / #12588:90339, stroke #00C9C9 "0.5px 0". The stat
	   cards themselves are fill-only (#F8F6F0). */
	.ocx-business-outcomes__row {
		display: grid !important;
		grid-template-columns: repeat(2, 1fr) !important;
		width: 100% !important;
		max-width: 100% !important;
		margin-inline: auto !important;
		gap: 12px !important;
		border-top: var(--Stroke-Hairline, 0.5px) solid #00C9C9 !important;
		border-bottom: var(--Stroke-Hairline, 0.5px) solid #00C9C9 !important;
		box-sizing: border-box !important;
	}

	.ocx-business-outcomes__card {
		width: 100% !important;
		min-width: 0 !important;
		height: auto !important;
		min-height: 150px !important;
		padding: 32px 16px 32px 10px !important;
		box-sizing: border-box !important;
		background: var(--Color-OpenCX-Dune-Lightest, #F8F6F0) !important;
		border: 0 !important;
		border-radius: var(--Radius-Small, 16px) !important;
		display: flex !important;
		flex-direction: column !important;
		justify-content: space-between !important;
	}

	.ocx-business-outcomes__card-top {
		display: flex !important;
		justify-content: space-between !important;
		align-items: center !important;
		width: 100% !important;
	}

	.ocx-business-outcomes__card-value {
		font-family: var(--wp--preset--font-family--widescreen-ex, "widescreen-ex", sans-serif) !important;
		font-size: 32px !important;
		font-weight: 400 !important;
		line-height: 1em !important;
		letter-spacing: -0.03em !important;
		color: var(--Color-OpenCX-Dune-Light, #CBBB85) !important;
		font-variant-numeric: tabular-nums !important;
	}

	.ocx-business-outcomes__card-icon img {
		width: 30px !important;
		height: 30px !important;
	}

	.ocx-business-outcomes__card-bottom {
		margin-top: 12px !important;
	}

	.ocx-business-outcomes__card-title {
		font-family: var(--wp--preset--font-family--widescreen, "Widescreen", sans-serif) !important;
		font-size: 16px !important;
		font-weight: 600 !important;
		line-height: 1.5em !important;
		color: #162227 !important;
		margin: 0 0 4px 0 !important;
	}

	.ocx-business-outcomes__card-desc {
		font-family: var(--wp--preset--font-family--widescreen, "Widescreen", sans-serif) !important;
		font-size: 14px !important;
		line-height: 1.3em !important;
		color: #162227 !important;
		margin: 0 !important;
	}

	@media (min-width: 576px) and (max-width: 991.98px) {
		.ocx-business-outcomes__section {
			padding: 48px 10px !important;
		}

		.ocx-business-outcomes__container {
			max-width: 100% !important;
		}

		.ocx-business-outcomes__heading {
			font-size: 40px !important;
		}

		.ocx-business-outcomes__card-value {
			font-size: 36px !important;
		}
	}

	/* --------------------------------------------------------------------------
	   11. INDUSTRIES PREVIEW (.ocx-industries-preview__section)
	   Figma: "Industries Preview" #12478:19419 (Mobile & Tablet)
	   -------------------------------------------------------------------------- */
	.ocx-industries-preview__section {
		padding: 0 10px !important;
		width: 100% !important;
		background-color: var(--Color-OpenCX-Dune-Lightest, #F8F6F0) !important;
		box-sizing: border-box !important;
	}

	.ocx-industries-preview__container {
		display: flex !important;
		flex-direction: column !important;
		width: 100% !important;
		max-width: 100% !important;
		height: auto !important;
		min-height: auto !important;
		margin: 0 auto !important;
		background: var(--Color-OpenCX-Dune-Lightest, #F8F6F0) !important;
		border: var(--Stroke-Hairline, 0.5px) solid var(--Color-OpenCX-Dune-Light, #CBBB85) !important;
		border-radius: 0 !important;
		padding: 40px 0 !important;
		gap: 32px !important;
		box-sizing: border-box !important;
	}

	.ocx-industries-preview__col-left {
		display: contents !important;
	}

	.ocx-industries-preview__heading {
		order: 1 !important;
		width: 100% !important;
		padding: 0 16px !important;
		box-sizing: border-box !important;
		font-family: var(--wp--preset--font-family--widescreen, "Widescreen", sans-serif) !important;
		font-size: 36px !important;
		font-weight: 400 !important;
		line-height: 1em !important;
		letter-spacing: -0.01em !important;
		color: #162227 !important;
		margin: 0 !important;
		text-align: left !important;
	}

	.ocx-industries-preview__accent {
		color: var(--Color-Blackberry-Light, #8F459C) !important;
		font-family: var(--wp--preset--font-family--widescreen-ex, "widescreen-ex", sans-serif) !important;
		letter-spacing: -0.03em !important;
	}

	.ocx-industries-preview__art,
	.ocx-industries-scanner {
		order: 2 !important;
		display: block !important;
		width: 100% !important;
		max-width: 622px !important;
		margin: 0 auto !important;
	}

	.ocx-industries-preview__col-right {
		order: 3 !important;
		display: flex !important;
		flex-direction: column !important;
		width: 100% !important;
		max-width: 100% !important;
		height: auto !important;
		min-height: auto !important;
		padding: 24px 0 !important;
		gap: 0 !important;
		border-radius: var(--Radius-Small, 16px) !important;
		border: var(--Stroke-Hairline, 0.5px) solid var(--Color-OpenCX-Dune-Light, #CBBB85) !important;
		background: var(--Color-OpenCX-Dune-Lightest, #F8F6F0) !important;
		margin: 0 !important;
		box-sizing: border-box !important;
	}

	.ocx-industries-preview__list {
		display: flex !important;
		flex-direction: column !important;
		width: 100% !important;
		gap: 0 !important;
		padding: 32px 16px !important;
		box-sizing: border-box !important;
	}

	.ocx-industries-preview__item {
		width: 100% !important;
		padding: 16px 12px !important;
		border-bottom: 1px solid #D2B5D7 !important;
		display: flex !important;
		flex-direction: column !important;
		box-sizing: border-box !important;
		cursor: pointer;
	}

	.ocx-industries-preview__item:first-child {
		border-top: 1px solid #D2B5D7 !important;
	}

	.ocx-industries-preview__item-header {
		display: flex !important;
		align-items: center !important;
		gap: 12px !important;
		text-decoration: none !important;
	}

	.ocx-industries-preview__item-icon {
		width: 0 !important;
		height: 24px !important;
		flex-shrink: 0 !important;
		display: flex !important;
		align-items: center !important;
		justify-content: center !important;
		opacity: 0 !important;
		margin-right: -12px !important;
		transform: translateX(-10px) !important;
		overflow: hidden !important;
		pointer-events: none !important;
		transition: width 0.35s cubic-bezier(0.25, 1, 0.5, 1),
		            margin-right 0.35s cubic-bezier(0.25, 1, 0.5, 1),
		            opacity 0.3s ease,
		            transform 0.35s cubic-bezier(0.25, 1, 0.5, 1) !important;
	}

	.ocx-industries-preview__item--active .ocx-industries-preview__item-icon {
		width: 20px !important;
		opacity: 1 !important;
		margin-right: 0 !important;
		transform: translateX(0) !important;
	}

	.ocx-industries-preview__item-icon img,
	.ocx-industries-preview__item-icon svg {
		width: 20px !important;
		height: 20px !important;
		display: block !important;
		flex-shrink: 0 !important;
	}

	.ocx-industries-preview__item-title {
		font-family: var(--wp--preset--font-family--widescreen, "Widescreen", sans-serif) !important;
		font-size: 24px !important;
		line-height: 1.3em !important;
		letter-spacing: -0.01em !important;
		font-weight: 300 !important;
		color: var(--Color-OpenCX-Dune, #B69E52) !important;
		margin: 0 !important;
		transition: color 0.35s cubic-bezier(0.25, 1, 0.5, 1) !important;
	}

	.ocx-industries-preview__item--active .ocx-industries-preview__item-title,
	.ocx-industries-preview__item:hover .ocx-industries-preview__item-title,
	.ocx-industries-preview__item-header:hover .ocx-industries-preview__item-title {
		color: var(--Color-Blackberry-Light, #8F459C) !important;
	}

	.ocx-industries-preview__item-desc {
		font-family: var(--wp--preset--font-family--widescreen, "Widescreen", sans-serif) !important;
		font-size: 16px !important;
		line-height: 1.5em !important;
		color: #162227 !important;
		margin: 0 !important;
		width: 100% !important;
	}

	.ocx-industries-preview__actions {
		order: 4 !important;
		display: flex !important;
		justify-content: center !important;
		align-items: center !important;
		width: 100% !important;
		margin: 0 !important;
	}

	.ocx-industries-preview__actions .ocx-link-dune {
		font-family: var(--wp--preset--font-family--widescreen, "Widescreen", sans-serif) !important;
		font-size: 16px !important;
		font-weight: 400 !important;
		line-height: 1.5em !important;
		color: var(--Color-OpenCX-Dune, #B69E52) !important;
		text-decoration: none !important;
		display: inline-flex !important;
		align-items: center !important;
		gap: 8px !important;
	}

	@media (min-width: 576px) and (max-width: 991.98px) {
		.ocx-industries-preview__section {
			padding: 0 10px !important;
		}

		.ocx-industries-preview__container {
			max-width: 100% !important;
			padding: 40px 24px 32px 24px !important;
			border-radius: var(--Radius-Medium, 20px) !important;
			gap: 28px !important;
		}

		.ocx-industries-preview__heading {
			font-size: 38px !important;
			margin-bottom: 8px !important;
		}

		.ocx-industries-preview__art,
		.ocx-industries-scanner {
			max-height: 200px !important;
			margin: 8px auto !important;
		}

		.ocx-industries-preview__col-right {
			padding: 32px 24px !important;
			border-radius: var(--Radius-Medium, 20px) !important;
		}

		.ocx-industries-preview__item-title {
			font-size: 26px !important;
		}

		.ocx-industries-preview__item-desc {
			font-size: 15px !important;
		}
	}

	/* --------------------------------------------------------------------------
	   12. TESTIMONIAL (.ocx-testimonial__section)
	   Figma: "Testimonial" #12478:20293 (Mobile & Tablet)
	   -------------------------------------------------------------------------- */
	.ocx-testimonial__section {
		padding: 0 10px !important;
		width: 100% !important;
		background-color: var(--Color-OpenCX-Dune-Lightest, #F8F6F0) !important;
		box-sizing: border-box !important;
	}

	.ocx-testimonial__outer {
		display: block !important;
		width: 100% !important;
		max-width: 100% !important;
		min-height: 0 !important;
		height: auto !important;
		margin: 0 auto !important;
		padding: 0 !important;
		background: var(--Color-Blackberry-Light, #8F459C) !important;
		border: var(--Stroke-Hairline, 0.5px) solid var(--Color-OpenCX-Dune-Light, #CBBB85) !important;
		border-radius: 0 !important;
		box-sizing: border-box !important;
	}

	.ocx-testimonial__card {
		width: calc(100% + 1px) !important;
		margin: -0.5px !important;
		height: auto !important;
		justify-content: flex-start !important;
		background: var(--Color-OpenCX-Dune-Lightest, #F8F6F0) !important;
		border: var(--Stroke-Hairline, 0.5px) solid var(--Color-OpenCX-Dune-Light, #CBBB85) !important;
		border-radius: var(--Radius-Small, 16px) !important;
		padding: 32px 24px !important;
		box-sizing: border-box !important;
	}

	.ocx-testimonial__heading {
		font-family: var(--wp--preset--font-family--widescreen, "Widescreen", sans-serif) !important;
		font-size: 36px !important;
		font-weight: 400 !important;
		line-height: 1em !important;
		letter-spacing: -0.01em !important;
		color: #162227 !important;
		text-align: center !important;
		margin: 0 0 40px 0 !important;
	}

	.ocx-testimonial__heading .ocx-gold {
		color: var(--Color-OpenCX-Dune, #B69E52) !important;
		font-family: var(--wp--preset--font-family--widescreen-ex, "widescreen-ex", sans-serif) !important;
		letter-spacing: -0.03em !important;
	}

	.ocx-testimonial__slider-container {
		width: calc(100% + 48px) !important;
		margin: 0 -24px !important;
		position: relative !important;
		padding-bottom: 75px !important;
		overflow: visible !important;
		display: flex !important;
		flex-direction: column !important;
	}

	.ocx-testimonial__grid {
		display: flex !important;
		flex-direction: row !important;
		flex-wrap: nowrap !important;
		width: 100% !important;
		min-height: 340px !important;
		align-items: flex-start !important;
		overflow-x: auto !important;
		scroll-snap-type: x mandatory !important;
		gap: 24px !important;
		-webkit-overflow-scrolling: touch;
		scrollbar-width: none !important;
	}

	.ocx-testimonial__grid::-webkit-scrollbar {
		display: none !important;
	}

	.ocx-testimonial__item {
		flex: 0 0 284px !important;
		max-width: 284px !important;
		min-width: 284px !important;
		min-height: 0 !important;
		scroll-snap-align: center !important;
		padding: 24px !important;
		box-sizing: border-box !important;
		background: var(--Color-OpenCX-White, #FCFBF9) !important;
		border-top: 0 !important;
		border-bottom: 0 !important;
		border-left: var(--Stroke-Hairline, 0.5px) solid var(--Color-OpenCX-Dune-Light, #CBBB85) !important;
		border-right: var(--Stroke-Hairline, 0.5px) solid var(--Color-OpenCX-Dune-Light, #CBBB85) !important;
	}

	.ocx-testimonial__item:not(:last-child) {
		border-top: 0 !important;
		border-bottom: 0 !important;
		border-left: var(--Stroke-Hairline, 0.5px) solid var(--Color-OpenCX-Dune-Light, #CBBB85) !important;
		border-right: var(--Stroke-Hairline, 0.5px) solid var(--Color-OpenCX-Dune-Light, #CBBB85) !important;
	}

	.ocx-testimonial__author-info {
		gap: 4px !important;
	}

	.ocx-testimonial__quote {
		font-family: var(--wp--preset--font-family--widescreen, "Widescreen", sans-serif) !important;
		font-size: 16px !important;
		line-height: 1.5em !important;
		color: #162227 !important;
		margin-bottom: 24px !important;
	}

	.ocx-testimonial__author-name {
		font-family: var(--wp--preset--font-family--widescreen, "Widescreen", sans-serif) !important;
		font-size: 16px !important;
		line-height: 1.5em !important;
		font-weight: 600 !important;
		color: #162227 !important;
		display: block !important;
	}

	.ocx-testimonial__author-role {
		font-family: var(--wp--preset--font-family--widescreen, "Widescreen", sans-serif) !important;
		font-size: 16px !important;
		line-height: 1.5em !important;
		font-weight: 400 !important;
		color: #162227 !important;
		display: block !important;
	}

	.ocx-testimonial__arrow-btn {
		position: absolute !important;
		bottom: 24px !important;
		top: auto !important;
		transform: none !important;
		width: 36px !important;
		height: 36px !important;
		padding: 6px !important;
		border-radius: 0 !important;
		background: #D2B5D7 !important;
		border: 1px solid #F8F6F0 !important;
		display: flex !important;
		align-items: center !important;
		justify-content: center !important;
		z-index: 5 !important;
		cursor: pointer !important;
	}

	.ocx-testimonial__arrow-btn img {
		width: 24px !important;
		height: 24px !important;
	}

	.ocx-testimonial__arrow-btn--prev {
		left: calc(50% - 42px) !important;
		right: auto !important;
	}

	.ocx-testimonial__arrow-btn--next {
		left: calc(50% + 6px) !important;
		right: auto !important;
	}

	.ocx-testimonial__dots {
		position: absolute !important;
		bottom: 4px !important;
		left: 0 !important;
		width: 100% !important;
		display: flex !important;
		align-items: center !important;
		justify-content: center !important;
		gap: 8px !important;
		height: auto !important;
		margin: 0 !important;
	}

	@media (min-width: 576px) and (max-width: 991.98px) {
		.ocx-testimonial__section {
			padding: 0 10px !important;
		}

		.ocx-testimonial__outer {
			max-width: 100% !important;
		}

		.ocx-testimonial__card {
			padding: 40px 32px !important;
		}

		.ocx-testimonial__slider-container {
			width: calc(100% + 64px) !important;
			margin: 0 -32px !important;
		}

		.ocx-testimonial__heading {
			font-size: 38px !important;
		}
	}

	/* --------------------------------------------------------------------------
	   13. CTA HOMEPAGE (.ocx-c25__section / .ocx-cta-homepage)
	   Figma: "CTA Homepage" #12478:20337 (Mobile & Tablet)
	   -------------------------------------------------------------------------- */
	.ocx-c25__section {
		padding: 0 10px 32px !important;
		width: 100% !important;
		background-color: var(--Color-OpenCX-Dune-Lightest, #F8F6F0) !important;
		box-sizing: border-box !important;
	}

	.ocx-cta-homepage__container {
		width: 100% !important;
		max-width: 100% !important;
		margin: 0 auto !important;
		padding: 40px 16px !important;
		background-color: var(--Color-OpenCX-Dune-Lightest, #F8F6F0) !important;
		background-image: url('../images/pattern-tile.svg') !important;
		background-repeat: repeat !important;
		background-size: 60px 60px !important;
		border-left: var(--Stroke-Hairline, 0.5px) solid var(--Color-OpenCX-Dune-Light, #CBBB85) !important;
		border-right: var(--Stroke-Hairline, 0.5px) solid var(--Color-OpenCX-Dune-Light, #CBBB85) !important;
		border-bottom: var(--Stroke-Hairline, 0.5px) solid var(--Color-OpenCX-Dune-Light, #CBBB85) !important;
		border-top: none !important;
		border-radius: 0 0 16px 16px !important;
		box-sizing: border-box !important;
		display: flex !important;
		flex-direction: column !important;
		align-items: center !important;
		text-align: center !important;
	}

	.ocx-c25__content {
		display: flex !important;
		flex-direction: column !important;
		align-items: center !important;
		width: 100% !important;
		gap: 32px !important;
	}

	.ocx-c25__heading {
		font-family: var(--wp--preset--font-family--widescreen, "Widescreen", sans-serif) !important;
		font-size: 32px !important;
		font-weight: 400 !important;
		line-height: 1.2em !important;
		letter-spacing: -0.01em !important;
		color: #162227 !important;
		margin: 0 !important;
		text-align: center !important;
	}

	.ocx-c25__lead {
		font-family: var(--wp--preset--font-family--widescreen, "Widescreen", sans-serif) !important;
		font-size: 16px !important;
		line-height: 1.5em !important;
		color: #162227 !important;
		margin: 0 !important;
		text-align: center !important;
	}

	.ocx-cta-homepage__btn-primary {
		display: inline-flex !important;
		align-items: center !important;
		justify-content: center !important;
		width: auto !important;
		min-width: 129px !important;
		height: 44px !important;
		padding: 10px 24px !important;
		white-space: nowrap !important;
		background: var(--Color-OpenCX-Dune, #B69E52) !important;
		border: 1px solid var(--Color-OpenCX-Dune, #B69E52) !important;
		border-radius: 0 !important;
		color: #FCFBF9 !important;
		font-family: var(--wp--preset--font-family--widescreen, "Widescreen", sans-serif) !important;
		font-size: 16px !important;
		font-weight: 300 !important;
		line-height: 24px !important;
		text-decoration: none !important;
	}

	@media (min-width: 576px) and (max-width: 991.98px) {
		.ocx-c25__section {
			padding: 0 10px 48px !important;
		}

		.ocx-cta-homepage__container {
			max-width: 100% !important;
			padding: 48px 32px !important;
		}

		.ocx-c25__heading {
			font-size: 38px !important;
		}
	}

	/* --------------------------------------------------------------------------
	   14. FOOTER (.ocx-footer)
	   Figma: "Footer" #13229:1839 (Mobile & Tablet)
	   -------------------------------------------------------------------------- */
	.ocx-footer {
		padding: 48px 10px 32px !important;
		width: 100% !important;
		background-color: var(--Color-OpenCX-Dune-Lightest, #F8F6F0) !important;
		box-sizing: border-box !important;
	}

	.ocx-footer__container {
		width: 100% !important;
		max-width: 100% !important;
		margin: 0 auto !important;
		padding: 40px 24px !important;
		background: var(--Color-OpenCX-Dune-Light, #CBBB85) !important;
		border: 1px solid var(--Color-OpenCX-Dune, #B69E52) !important;
		border-radius: var(--Radius-Small, 16px) !important;
		box-sizing: border-box !important;
		gap: 48px !important;
		min-height: auto !important;
	}

	.ocx-footer__brand-row {
		gap: 8px !important;
		width: 100% !important;
	}

	.ocx-footer__tagline {
		line-height: 0 !important;
	}

	.ocx-footer__tagline img {
		width: 277px !important;
		max-width: 100% !important;
		height: auto !important;
	}

	.ocx-footer__main {
		display: flex !important;
		flex-direction: column !important;
		gap: 48px !important;
		width: 100% !important;
	}

	.ocx-footer__left {
		width: 100% !important;
		max-width: 100% !important;
		gap: 24px !important;
		flex: none !important;
	}

	.ocx-footer__social {
		gap: 16px !important;
	}

	.ocx-footer__card {
		width: 100% !important;
		max-width: 100% !important;
		padding: 32px 24px !important;
		box-sizing: border-box !important;
	}

	.ocx-footer__nav-grid {
		width: 100% !important;
		max-width: 100% !important;
		display: grid !important;
		grid-template-columns: repeat(3, 1fr) !important;
		gap: 32px 16px !important;
		justify-content: start !important;
	}

	.ocx-footer__nav-group--login {
		grid-column: auto !important;
	}

	.ocx-footer__credits {
		gap: 32px !important;
		width: 100% !important;
	}

	.ocx-footer__legal {
		display: flex !important;
		align-items: center !important;
		justify-content: center !important;
		width: 100% !important;
	}

	.ocx-footer__copyright {
		text-align: center !important;
		width: 100% !important;
	}

	@media (max-width: 640px) {
		.ocx-footer__container {
			padding: 32px 16px !important;
			gap: 36px !important;
		}

		.ocx-footer__tagline {
			line-height: 0 !important;
		}

		.ocx-footer__tagline img {
			width: 240px !important;
			max-width: 100% !important;
			height: auto !important;
		}

		.ocx-footer__card {
			background-color: #162227 !important;
			border-radius: 16px !important;
			padding: 28px 20px !important;
			box-sizing: border-box !important;
			border: none !important;
			box-shadow: none !important;
		}

		.ocx-footer__card-title {
			font-family: var(--wp--preset--font-family--widescreen, 'Widescreen', sans-serif) !important;
			font-size: 32px !important;
			line-height: 1.2 !important;
			color: #B69E52 !important;
			letter-spacing: -0.01em !important;
			margin: 0 0 4px 0 !important;
		}

		.ocx-footer__card-subtitle {
			font-family: var(--wp--preset--font-family--widescreen, 'Widescreen', sans-serif) !important;
			font-size: 18px !important;
			line-height: 1.4 !important;
			color: #F8F6F0 !important;
			margin: 0 0 24px 0 !important;
			opacity: 1 !important;
		}

		.ocx-footer__newsletter-form {
			display: flex !important;
			flex-direction: column !important;
			width: 100% !important;
			height: auto !important;
			padding: 0 !important;
			margin: 0 0 20px 0 !important;
		}

		.ocx-footer__form-group {
			display: flex !important;
			align-items: center !important;
			width: 100% !important;
			height: 48px !important;
			background-color: #162227 !important;
			border: 1px solid #FCFBF9 !important;
			border-radius: 0 !important;
			box-sizing: border-box !important;
			padding: 0 6px 0 16px !important;
			box-shadow: none !important;
		}

		.ocx-footer__form-group:focus-within {
			border-color: #FCFBF9 !important;
			box-shadow: none !important;
			background-color: #162227 !important;
		}

		.ocx-footer__input {
			flex: 1 !important;
			min-width: 0 !important;
			background: transparent !important;
			border: none !important;
			outline: none !important;
			font-family: var(--wp--preset--font-family--widescreen, 'Widescreen', sans-serif) !important;
			font-weight: 300 !important;
			font-size: 15px !important;
			line-height: 24px !important;
			color: #FCFBF9 !important;
			padding: 0 !important;
			margin: 0 !important;
		}

		.ocx-footer__input::placeholder {
			color: #FCFBF9 !important;
			opacity: 0.9 !important;
		}

		.ocx-footer__submit-btn {
			background: transparent !important;
			border: none !important;
			border-radius: 0 !important;
			padding: 0 !important;
			margin: 0 !important;
			cursor: pointer !important;
			display: flex !important;
			align-items: center !important;
			justify-content: center !important;
			width: 36px !important;
			height: 36px !important;
			flex-shrink: 0 !important;
			transition: transform 0.2s ease, opacity 0.2s ease !important;
		}

		.ocx-footer__submit-btn svg {
			width: 36px !important;
			height: 36px !important;
		}

		.ocx-footer__submit-btn svg path {
			stroke: #B69E52 !important;
			stroke-width: 1.5 !important;
		}

		.ocx-footer__submit-btn:hover {
			opacity: 0.8 !important;
			transform: translateX(2px) !important;
		}

		.ocx-footer__submit-btn:active {
			transform: scale(0.95) !important;
		}

		.ocx-footer__disclaimer {
			margin: 0 !important;
			font-family: var(--wp--preset--font-family--inter, 'Inter', sans-serif) !important;
			font-weight: 400 !important;
			font-size: 10px !important;
			line-height: 14px !important;
			color: #FCFBF9 !important;
			text-align: center !important;
		}

		.ocx-footer__disclaimer-link {
			color: #FCFBF9 !important;
			text-decoration: underline !important;
			font-weight: 400 !important;
		}

		.ocx-footer__nav-grid {
			grid-template-columns: repeat(2, 1fr) !important;
			gap: 28px 16px !important;
		}

		.ocx-footer__group-title {
			font-size: 15px !important;
			line-height: 22px !important;
		}

		.ocx-footer__nav-link {
			font-size: 14px !important;
			line-height: 20px !important;
			padding: 6px 0 !important;
		}
	}
}

/* ==========================================================================
   Hero - Industries (Figma #12876:2040)
   ========================================================================== */

.ocx-section.ocx-industries-hero__section {
	width: 100% !important;
	max-width: 100% !important;
	box-sizing: border-box !important;
	background-color: var(--Color-OpenCX-White, #FCFBF9) !important;
	padding: 0 !important;
	margin: 0 !important;
	display: flex !important;
	flex-direction: column !important;
	align-items: center !important;
	justify-content: center !important;
}

.ocx-industries-hero__outer {
	width: 100% !important;
	max-width: 1280px !important;
	min-height: 600px !important;
	margin: 0 auto !important;
	border: var(--Stroke-Hairline, 0.5px) solid var(--Color-OpenCX-Dune-Light, #CBBB85) !important;
	background: var(--Color-OpenCX-Lighter, #B1C9D3) !important;
	box-sizing: border-box !important;
	display: flex !important;
	flex-direction: column !important;
	align-items: center !important;
	justify-content: flex-start !important;
}

.ocx-industries-hero__container {
	position: relative !important;
	display: flex !important;
	width: calc(100% + 2px) !important;
	min-height: 600px !important;
	margin: -1px !important;
	padding: 68.5px var(--Section-Padding-padding-section-medium, 80px) !important;
	flex-direction: column !important;
	justify-content: center !important;
	align-items: center !important;
	gap: 80px !important;
	border-radius: var(--Radius-Medium, 20px) !important;
	border: var(--Stroke-Hairline, 0.5px) solid var(--Color-OpenCX-Dune-Light, #CBBB85) !important;
	background: var(--Color-OpenCX-White, #FCFBF9) !important;
	box-sizing: border-box !important;
}

.ocx-industries-hero__card {
	display: grid !important;
	width: 100% !important;
	max-width: 1120px !important;
	row-gap: 33px !important;
	column-gap: 33px !important;
	grid-template-rows: repeat(1, fit-content(100%)) !important;
	grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr) !important;
	grid-auto-flow: row !important;
	border-radius: var(--Radius-Small, 16px) !important;
	box-sizing: border-box !important;
	align-items: center !important;
}

.ocx-industries-hero__col-content {
	display: flex !important;
	height: 382px !important;
	flex-direction: column !important;
	justify-content: center !important;
	align-items: flex-start !important;
	gap: var(--Section-Padding-padding-section-special, 36px) !important;
	align-self: start !important;
	grid-row: span 1 !important;
	grid-column: span 1 !important;
	justify-self: stretch !important;
	box-sizing: border-box !important;
}

.ocx-industries-hero__text-group {
	display: flex !important;
	flex-direction: column !important;
	align-items: flex-start !important;
	gap: 24px !important;
	align-self: stretch !important;
}

.ocx-industries-hero__heading {
	margin: 0 !important;
	font-family: var(--wp--preset--font-family--widescreen, 'Widescreen', sans-serif) !important;
	font-size: 55px !important;
	font-weight: 400 !important;
	line-height: 1em !important;
	letter-spacing: -0.01em !important;
	color: #162227 !important;
	text-align: left !important;
}

.ocx-industries-hero__heading-gold {
	display: inline !important;
	font-family: var(--wp--preset--font-family--widescreen-ex, 'widescreen-ex', sans-serif) !important;
	color: var(--Color-OpenCX-Dune, #B69E52) !important;
	letter-spacing: -0.03em !important;
	font-weight: 400 !important;
}

.ocx-industries-hero__paragraph {
	margin: 0 !important;
	font-family: 'Manrope', var(--wp--preset--font-family--manrope, sans-serif) !important;
	font-size: var(--Text-Sizes-Text-Medium, 18px) !important;
	font-weight: 300 !important;
	line-height: 1.5em !important;
	color: #000000 !important;
	text-align: left !important;
}

.ocx-industries-hero__actions {
	display: flex !important;
	align-items: flex-start !important;
	gap: 16px !important;
}

.ocx-industries-hero__btn {
	display: inline-flex !important;
	padding: 10px 24px !important;
	justify-content: center !important;
	align-items: center !important;
	gap: 8px !important;
	border: 1px solid var(--Color-OpenCX-Dune-Light, #CBBB85) !important;
	background: var(--Color-OpenCX-Dune-Lighter, #F0EBDC) !important;
	border-radius: 0px !important;
	color: var(--Color-OpenCX-Dune, #B69E52) !important;
	font-family: var(--wp--preset--font-family--widescreen, 'Widescreen', sans-serif) !important;
	font-size: 16px !important;
	font-weight: 300 !important;
	line-height: 1.5em !important;
	letter-spacing: 0px !important;
	text-decoration: none !important;
	white-space: nowrap !important;
	box-sizing: border-box !important;
	cursor: pointer !important;
	transition: background-color 0.2s ease, opacity 0.2s ease !important;
}

.ocx-industries-hero__btn:hover {
	background-color: #e5ded0 !important;
	opacity: 0.95 !important;
}

.ocx-industries-hero__col-media,
.ocx-industries-hero__col-spacer {
	grid-row: span 1 !important;
	grid-column: span 1 !important;
	display: flex !important;
	width: 100% !important;
	max-width: 444px !important;
	height: 463px !important;
	justify-self: end !important;
	justify-content: center !important;
	align-items: center !important;
	box-sizing: border-box !important;
}

.ocx-industries-hero__img {
	width: 100% !important;
	max-width: 428px !important;
	height: 463px !important;
	display: block !important;
	object-fit: contain !important;
}

/* -------------------------------------------------------------------------
   Industries Hero Responsive Breakpoints
   ------------------------------------------------------------------------- */
@media (min-width: 992px) and (max-width: 1199.98px) {
	.ocx-section.ocx-industries-hero__section {
		padding: 0 10px 0 !important;
	}

	.ocx-industries-hero__container {
		padding: 48px !important;
	}

	.ocx-industries-hero__heading {
		font-size: clamp(42px, 3.8vw, 48px) !important;
	}

	.ocx-industries-hero__paragraph {
		font-size: 17px !important;
	}

	.ocx-industries-hero__col-media,
	.ocx-industries-hero__col-spacer {
		max-width: 380px !important;
		height: auto !important;
	}

	.ocx-industries-hero__img {
		max-width: 360px !important;
		height: auto !important;
	}
}

@media (max-width: 991.98px) {
	.ocx-section.ocx-industries-hero__section {
		padding: var(--Section-Padding-padding-section-xsmall, 16px) 10px 0 10px !important;
	}

	.ocx-industries-hero__outer {
		width: 100% !important;
		max-width: 100% !important;
		height: auto !important;
		min-height: auto !important;
		margin: 0 auto !important;
		background: var(--Color-OpenCX-Lighter, #B1C9D3) !important;
		border: var(--Stroke-Hairline, 0.5px) solid var(--Color-OpenCX-Dune-Light, #CBBB85) !important;
		border-radius: 0 !important;
		box-sizing: border-box !important;
	}

	.ocx-industries-hero__container {
		width: calc(100% + 1px) !important;
		max-width: none !important;
		height: auto !important;
		min-height: auto !important;
		margin: -0.5px !important;
		padding: 48px 32px !important;
		border: var(--Stroke-Hairline, 0.5px) solid var(--Color-OpenCX-Dune-Light, #CBBB85) !important;
		border-radius: var(--Radius-Small, 16px) !important;
		background: var(--Color-OpenCX-White, #FCFBF9) !important;
		box-sizing: border-box !important;
	}

	.ocx-industries-hero__card {
		grid-template-columns: 1fr !important;
		gap: 32px !important;
	}

	.ocx-industries-hero__col-content {
		height: auto !important;
		gap: 28px !important;
	}

	.ocx-industries-hero__col-spacer {
		display: none !important;
	}

	.ocx-industries-hero__col-media {
		display: flex !important;
		width: 100% !important;
		max-width: 100% !important;
		height: auto !important;
		justify-self: center !important;
		justify-content: center !important;
		align-items: center !important;
		order: 2 !important;
	}

	.ocx-industries-hero__img {
		max-width: 380px !important;
		height: auto !important;
		margin: 0 auto !important;
	}

	.ocx-industries-hero__heading {
		font-size: clamp(34px, 4.5vw, 42px) !important;
		line-height: 1.1em !important;
	}

	.ocx-industries-hero__paragraph {
		font-size: 16px !important;
	}
}

@media (max-width: 767.98px) {
	.ocx-section.ocx-industries-hero__section {
		padding: var(--Section-Padding-padding-section-xsmall, 16px) 10px 0 10px !important;
	}

	.ocx-industries-hero__outer {
		width: 100% !important;
		max-width: 100% !important;
		height: auto !important;
		min-height: auto !important;
		margin: 0 auto !important;
		background: var(--Color-OpenCX-Lighter, #B1C9D3) !important;
		border: var(--Stroke-Hairline, 0.5px) solid var(--Color-OpenCX-Dune-Light, #CBBB85) !important;
		border-radius: 0 !important;
		box-sizing: border-box !important;
	}

	.ocx-industries-hero__container {
		width: calc(100% + 1px) !important;
		max-width: none !important;
		height: auto !important;
		min-height: auto !important;
		margin: -0.5px !important;
		padding: 36px 20px 48px 20px !important;
		border: var(--Stroke-Hairline, 0.5px) solid var(--Color-OpenCX-Dune-Light, #CBBB85) !important;
		border-radius: var(--Radius-Medium, 20px) !important;
		background: var(--Color-OpenCX-White, #FCFBF9) !important;
		box-sizing: border-box !important;
	}

	.ocx-industries-hero__card {
		display: flex !important;
		flex-direction: column !important;
		width: 100% !important;
		gap: 0 !important;
	}

	.ocx-industries-hero__col-content {
		display: contents !important;
	}

	.ocx-industries-hero__text-group {
		order: 1 !important;
		display: flex !important;
		flex-direction: column !important;
		gap: 16px !important;
		width: 100% !important;
	}

	.ocx-industries-hero__heading {
		font-size: 38px !important;
		line-height: 1.1em !important;
		letter-spacing: -0.01em !important;
		margin: 0 !important;
		text-align: left !important;
	}

	.ocx-industries-hero__heading-gold {
		font-family: var(--wp--preset--font-family--widescreen-ex, 'widescreen-ex', sans-serif) !important;
		color: var(--Color-OpenCX-Dune, #B69E52) !important;
		letter-spacing: -0.03em !important;
	}

	.ocx-industries-hero__paragraph {
		font-family: 'Manrope', var(--wp--preset--font-family--manrope, sans-serif) !important;
		font-size: 16px !important;
		font-weight: 300 !important;
		line-height: 1.5em !important;
		color: #000000 !important;
		margin: 0 !important;
		text-align: left !important;
	}

	.ocx-industries-hero__col-media {
		order: 2 !important;
		display: flex !important;
		width: 100% !important;
		max-width: 100% !important;
		height: auto !important;
		justify-content: center !important;
		align-items: center !important;
		margin: 32px 0 32px 0 !important;
	}

	.ocx-industries-hero__picture {
		display: block !important;
		width: 100% !important;
		max-width: 100% !important;
	}

	.ocx-industries-hero__img {
		width: 100% !important;
		max-width: 100% !important;
		height: auto !important;
		display: block !important;
		margin: 0 auto !important;
		object-fit: contain !important;
	}

	.ocx-industries-hero__actions {
		order: 3 !important;
		display: flex !important;
		width: 100% !important;
		justify-content: center !important;
		align-items: center !important;
		margin: 0 auto !important;
	}

	.ocx-industries-hero__btn {
		display: inline-flex !important;
		padding: 12px 28px !important;
		justify-content: center !important;
		align-items: center !important;
		gap: 8px !important;
		border: 1px solid var(--Color-OpenCX-Dune-Light, #CBBB85) !important;
		background: var(--Color-OpenCX-Dune-Lighter, #F0EBDC) !important;
		border-radius: 0px !important;
		color: var(--Color-OpenCX-Dune, #B69E52) !important;
		font-family: var(--wp--preset--font-family--widescreen, 'Widescreen', sans-serif) !important;
		font-size: 16px !important;
		font-weight: 300 !important;
		line-height: 1.5em !important;
		letter-spacing: 0px !important;
		text-decoration: none !important;
		box-sizing: border-box !important;
		cursor: pointer !important;
	}
}

/* ==========================================================================
   Industries Main Section (Figma Frame #12876:2053)
   ========================================================================== */

.ocx-section.ocx-industries__section {
	width: 100% !important;
	max-width: 100% !important;
	box-sizing: border-box !important;
	background-color: var(--Color-OpenCX-White, #FCFBF9) !important;
	padding: 0 !important;
	margin: 0 !important;
	display: flex !important;
	flex-direction: column !important;
	align-items: center !important;
	justify-content: center !important;
}

.ocx-industries-hero__section + .ocx-industries__section .ocx-industries__outer,
.ocx-section.ocx-industries-hero__section ~ .ocx-industries__section .ocx-industries__outer,
.ocx-industries__section + .ocx-testimonial__section .ocx-testimonial__outer,
.ocx-section.ocx-industries__section ~ .ocx-testimonial__section .ocx-testimonial__outer {
	margin-top: calc(-1 * var(--Stroke-Hairline, 0.5px)) !important;
}

.ocx-industries__outer {
	width: 100% !important;
	max-width: 1280px !important;
	margin: calc(-1 * var(--Stroke-Hairline, 0.5px)) auto 0 !important;
	border: var(--Stroke-Hairline, 0.5px) solid var(--Color-OpenCX-Dune-Light, #CBBB85) !important;
	background: var(--Color-Blackberry-Light, #8F459C) !important;
	box-sizing: border-box !important;
	display: flex !important;
	flex-direction: column !important;
	position: relative !important;
}

.ocx-industries__container {
	position: relative !important;
	display: flex !important;
	justify-content: space-between !important;
	align-items: flex-start !important;
	gap: 33px !important;
	width: calc(100% + (2 * var(--Stroke-Hairline, 0.5px))) !important;
	margin: calc(-1 * var(--Stroke-Hairline, 0.5px)) !important;
	padding: 112px 48px 112px 80px !important;
	border-radius: var(--Radius-Medium, 20px) !important;
	border: var(--Stroke-Hairline, 0.5px) solid var(--Color-OpenCX-Dune-Light, #CBBB85) !important;
	background: var(--Color-OpenCX-White, #FCFBF9) !important;
	box-sizing: border-box !important;
}

/* Sticky Left Sidebar Nav (Figma #12876:2057) */
.ocx-industries__sidebar {
	width: 230px !important;
	flex-shrink: 0 !important;
	position: sticky !important;
	top: 120px !important;
	align-self: flex-start !important;
	z-index: 10 !important;
	box-sizing: border-box !important;
}

.ocx-industries__nav {
	display: flex !important;
	flex-direction: column !important;
	gap: 10px !important;
	margin: 0 !important;
	padding: 0 !important;
	list-style: none !important;
}

.ocx-industries__nav-item {
	display: inline-flex !important;
	flex-direction: row !important;
	align-items: center !important;
	gap: 10px !important;
	padding: 0 0 10px 0 !important;
	color: #426676 !important;
	font-family: "Widescreen", var(--font-heading), sans-serif !important;
	font-style: normal !important;
	font-weight: 400 !important;
	font-size: 18px !important;
	line-height: 1.5em !important;
	text-decoration: none !important;
	cursor: pointer !important;
	transition: color 0.2s ease !important;
	box-sizing: border-box !important;
}

.ocx-industries__nav-item:hover {
	color: var(--Color-OpenCX-Darker, #162227) !important;
}

.ocx-industries__nav-item.is-active {
	color: var(--Color-Blackberry-Light, #8F459C) !important;
	font-weight: 400 !important;
}

.ocx-industries__nav-indicator {
	width: 20px !important;
	height: 12px !important;
	flex-shrink: 0 !important;
	display: inline-block !important;
}

/* Right Content Feed (Figma #12876:2088) */
.ocx-industries__feed {
	display: flex !important;
	flex-direction: column !important;
	gap: 100px !important;
	flex: 1 1 889px !important;
	max-width: 889px !important;
	min-width: 0 !important;
	box-sizing: border-box !important;
}

/* Individual Industry Card (Figma #12876:2089) */
.ocx-industries__card {
	background: var(--Color-Amber-Light, #FAF8F4) !important;
	border: var(--Stroke-Hairline, 0.5px) solid var(--Color-OpenCX-Dune-Light, #CBBB85) !important;
	border-radius: var(--Radius-Medium, 20px) !important;
	padding: 48px !important;
	display: flex !important;
	flex-direction: column !important;
	gap: 48px !important;
	box-sizing: border-box !important;
	scroll-margin-top: 100px !important;
}

.ocx-industries__card-header {
	display: flex !important;
	flex-direction: row !important;
	justify-content: space-between !important;
	align-items: flex-end !important;
	gap: 32px !important;
	width: 100% !important;
	box-sizing: border-box !important;
}

.ocx-industries__card-header-main {
	display: flex !important;
	flex-direction: column !important;
	align-items: flex-start !important;
	gap: 48px !important;
	max-width: 510px !important;
	flex: 1 1 auto !important;
	box-sizing: border-box !important;
}

.ocx-industries__card-visual {
	display: flex !important;
	justify-content: flex-end !important;
	align-items: flex-end !important;
	flex-shrink: 0 !important;
	width: 250px !important;
	height: 250px !important;
	box-sizing: border-box !important;
}

.ocx-industries__card-visual-img {
	width: 192px !important;
	height: 192px !important;
	max-width: 100% !important;
	aspect-ratio: 1 / 1 !important;
	object-fit: contain !important;
	display: block !important;
}

.ocx-industries__icon-badge {
	width: 40px !important;
	height: 40px !important;
	box-sizing: border-box !important;
	padding: 1px 8px !important;
	background: var(--Color-OpenCX-White, #FCFBF9) !important;
	border: 1px solid var(--Color-Blackberry-Light, #8F459C) !important;
	border-radius: 4px !important;
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	flex-shrink: 0 !important;
}

.ocx-industries__icon {
	width: 24px !important;
	height: 24px !important;
	object-fit: contain !important;
	display: block !important;
}

.ocx-industries__card-title {
	font-family: "Widescreen", var(--font-heading), sans-serif !important;
	font-style: normal !important;
	font-weight: 400 !important;
	font-size: 44px !important;
	line-height: 1.2em !important;
	letter-spacing: -0.01em !important;
	color: var(--Color-OpenCX-Dune, #B69E52) !important;
	margin: 0 !important;
	padding: 0 !important;
}

/* 2x2 Grid (Figma #12876:2106) */
.ocx-industries__grid {
	display: grid !important;
	grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
	box-sizing: border-box !important;
	width: 100% !important;
}

.ocx-industries__grid-cell {
	display: flex !important;
	flex-direction: column !important;
	align-items: flex-start !important;
	gap: 16px !important;
	padding: 32px 0 !important;
	border-top: var(--Stroke-Hairline, 0.5px) solid var(--Color-OpenCX-Dune-Light, #CBBB85) !important;
	box-sizing: border-box !important;
}

.ocx-industries__grid-cell:nth-child(odd) {
	padding-right: 32px !important;
	border-right: var(--Stroke-Hairline, 0.5px) solid var(--Color-OpenCX-Dune-Light, #CBBB85) !important;
}

.ocx-industries__grid-cell:nth-child(even) {
	padding-left: 32px !important;
}

.ocx-industries__cell-title {
	font-family: "Widescreen", var(--font-heading), sans-serif !important;
	font-style: normal !important;
	font-weight: 300 !important;
	font-size: 24px !important;
	line-height: 1.4em !important;
	color: var(--Color-OpenCX-Darker, #162227) !important;
	margin: 0 !important;
	padding: 0 !important;
}

.ocx-industries__cell-text {
	font-family: "Widescreen", var(--font-heading), sans-serif !important;
	font-style: normal !important;
	font-weight: 300 !important;
	font-size: 16px !important;
	line-height: 1.5em !important;
	color: #000000 !important;
	margin: 0 !important;
	padding: 0 !important;
}

/* Card Footer & CTA (Figma #12876:2127) */
.ocx-industries__card-footer {
	display: flex !important;
	align-items: center !important;
	justify-content: flex-start !important;
	padding: 0 !important;
	margin: 0 !important;
}

.ocx-industries__cta {
	display: inline-flex !important;
	align-items: center !important;
	gap: 8px !important;
	text-decoration: none !important;
	font-family: "Manrope", var(--font-body), sans-serif !important;
	font-weight: 500 !important;
	font-size: 16px !important;
	line-height: 1.5em !important;
	color: var(--Color-OpenCX-Dune, #B69E52) !important;
	border-radius: 0px 12px 0px 12px !important;
	transition: opacity 0.2s ease, transform 0.2s ease !important;
}

.ocx-industries__cta:hover {
	opacity: 0.8 !important;
}

.ocx-industries__cta:hover .ocx-industries__cta-icon {
	transform: translateX(4px) !important;
}

.ocx-industries__cta-icon {
	width: 24px !important;
	height: 24px !important;
	transition: transform 0.2s ease !important;
}

/* Responsive Media Queries */
@media (max-width: 1199.98px) {
	.ocx-section.ocx-industries__section {
		padding: 0 10px 0 !important;
	}

	.ocx-industries__outer {
		width: 100% !important;
		max-width: 100% !important;
		margin: calc(-1 * var(--Stroke-Hairline, 0.5px)) auto 0 !important;
		background: var(--Color-Blackberry-Light, #8F459C) !important;
		border: var(--Stroke-Hairline, 0.5px) solid var(--Color-OpenCX-Dune-Light, #CBBB85) !important;
		border-radius: 0 !important;
		box-sizing: border-box !important;
	}

	.ocx-industries__container {
		width: calc(100% + 1px) !important;
		max-width: none !important;
		margin: -0.5px !important;
		border: var(--Stroke-Hairline, 0.5px) solid var(--Color-OpenCX-Dune-Light, #CBBB85) !important;
		border-radius: var(--Radius-Small, 16px) !important;
		background: var(--Color-OpenCX-White, #FCFBF9) !important;
		box-sizing: border-box !important;
		flex-direction: column !important;
		padding: 48px 24px 64px !important;
		gap: 40px !important;
	}

	.ocx-industries__sidebar {
		width: 100% !important;
		position: sticky !important;
		top: 0 !important;
		z-index: 100 !important;
		background: #FCFBF9 !important;
		padding: 32px 0 !important;
		border-bottom: 1px solid rgba(177, 201, 211, 0.4) !important;
	}

	.ocx-industries__nav {
		position: relative !important;
		flex-direction: row !important;
		overflow-x: auto !important;
		white-space: nowrap !important;
		scrollbar-width: none !important;
		-webkit-overflow-scrolling: touch !important;
		gap: 10px !important;
		padding: 0 !important;
		margin: 0 !important;
	}

	.ocx-industries__nav::-webkit-scrollbar {
		display: none !important;
	}

	.ocx-industries__nav-item {
		padding: 8px 18px !important;
		border-radius: 9999px !important;
		background: rgba(177, 201, 211, 0.15) !important;
		font-size: 15px !important;
		line-height: 1.5 !important;
		font-weight: 400 !important;
		color: #426676 !important;
		gap: 10px !important;
		transition: color 0.2s ease, opacity 0.2s ease, background-color 0.2s ease !important;
	}

	.ocx-industries__nav-item:hover {
		color: #162227 !important;
	}

	.ocx-industries__nav-item.is-active {
		background: #4A2B4F !important;
		color: #FFFFFF !important;
		font-weight: 600 !important;
	}

	.ocx-industries__nav-item.is-active .ocx-industries__nav-indicator {
		filter: brightness(0) invert(1) !important;
	}

	.ocx-industries__feed {
		width: 100% !important;
		max-width: 100% !important;
		gap: 64px !important;
	}

	.ocx-industries__card {
		padding: 36px 28px !important;
		scroll-margin-top: 122px !important;
		gap: 36px !important;
	}

	.ocx-industries__card-title {
		font-size: clamp(28px, 4vw, 36px) !important;
	}

	.ocx-industries__card-visual {
		width: 180px !important;
		height: 180px !important;
	}

	.ocx-industries__card-visual-img {
		width: 150px !important;
		height: 150px !important;
	}
}

@media (max-width: 767.98px) {
	.ocx-section.ocx-industries__section {
		padding: 0 10px 0 !important;
	}

	.ocx-industries__container {
		width: calc(100% + 1px) !important;
		margin: -0.5px !important;
		border: var(--Stroke-Hairline, 0.5px) solid var(--Color-OpenCX-Dune-Light, #CBBB85) !important;
		border-radius: var(--Radius-Small, 16px) !important;
		padding: 32px 16px 48px !important;
		gap: 32px !important;
	}

	.ocx-industries__card {
		padding: 24px 18px !important;
		border-radius: 16px !important;
		scroll-margin-top: 122px !important;
		gap: 28px !important;
	}

	.ocx-industries__card-header {
		flex-direction: column !important;
		align-items: flex-start !important;
		gap: 24px !important;
	}

	.ocx-industries__card-header-main {
		gap: 24px !important;
		max-width: 100% !important;
	}

	.ocx-industries__card-visual {
		width: 100% !important;
		height: auto !important;
		justify-content: flex-start !important;
		align-items: center !important;
	}

	.ocx-industries__card-visual-img {
		width: 140px !important;
		height: 140px !important;
	}

	.ocx-industries__card-title {
		font-size: 26px !important;
		line-height: 1.25em !important;
	}

	.ocx-industries__grid {
		grid-template-columns: 1fr !important;
	}

	.ocx-industries__grid-cell {
		padding: 24px 0 !important;
	}

	.ocx-industries__grid-cell:nth-child(odd) {
		padding-right: 0 !important;
		border-right: none !important;
	}

	.ocx-industries__grid-cell:nth-child(even) {
		padding-left: 0 !important;
	}

	.ocx-industries__cell-title {
		font-size: 20px !important;
	}

	.ocx-industries__cell-text {
		font-size: 15px !important;
	}
}






/* ==========================================================================
   PAGINA CONTACT — rediseño Figma "Contact • Desktop" #12895:2833
   ========================================================================== */
.ocx-section.ocx-contact-hero__section {
	width: 100% !important;
	padding: 0 var(--Section-Padding-padding-section-medium, 80px) !important;
	margin: 0 !important;
	background-color: var(--Color-OpenCX-Dune-Lightest, #F8F6F0) !important;
	box-sizing: border-box !important;
}

/* Outer frame (#12895:2836): 1280px centrado, background #CBBB85 (Dune), border 0.5px solid #607F8B, square corners */
.ocx-contact-hero__outer {
	position: relative !important;
	width: 100% !important;
	max-width: var(--Container-container-large, 1280px) !important;
	margin: 0 auto !important;
	box-sizing: border-box !important;
	background-color: var(--Color-OpenCX-Dune-Light, #CBBB85) !important;
	border: var(--Stroke-Hairline, 0.5px) solid #607F8B !important;
}

/* Inner container (#12895:2837): border-radius 20px, background #FCFBF9, border 0.5px solid #CBBB85, margin: -1px */
.ocx-contact-hero__container {
	box-sizing: border-box !important;
	margin: -1px !important;
	width: calc(100% + 2px) !important;
	padding: 80px 80px 100px 80px !important;
	background-color: var(--Color-OpenCX-White, #FCFBF9) !important;
	background-image: url('../images/gradient-1.svg') !important;
	background-position: center top !important;
	background-repeat: no-repeat !important;
	background-size: cover !important;
	border: var(--Stroke-Hairline, 0.5px) solid var(--Color-OpenCX-Dune-Light, #CBBB85) !important;
	border-radius: var(--Radius-Medium, 20px) !important;
}

/* Grid: 1fr left spacer / 2fr right content (#12895:2881 + #12895:2839) */
.ocx-contact-hero__grid {
	display: grid !important;
	grid-template-columns: minmax(0, 1fr) minmax(0, 2fr) !important;
	gap: 48px !important;
	width: 100% !important;
	box-sizing: border-box !important;
}


.ocx-contact-hero__col-main {
	display: flex !important;
	flex-direction: column !important;
	gap: 48px !important;
	min-width: 0 !important;
	width: 100% !important;
}

/* Header (#12895:2883) */
.ocx-contact-hero__header {
	display: flex !important;
	flex-direction: column !important;
	gap: 24px !important;
	width: 100% !important;
	max-width: 720px !important;
}

.ocx-contact-hero__title {
	margin: 0 !important;
	font-family: var(--wp--preset--font-family--widescreen, "widescreen", sans-serif) !important;
	font-weight: 400 !important;
	font-size: 52px !important;
	line-height: 1.15 !important;
	letter-spacing: -0.01em !important;
	color: #162227 !important;
}

.ocx-contact-hero__title-accent {
	font-family: var(--wp--preset--font-family--widescreen-ex, "widescreen-ex", sans-serif) !important;
	color: var(--Color-OpenCX-Dune-Light, #CBBB85) !important;
}

.ocx-contact-hero__lead {
	margin: 0 !important;
	font-family: var(--wp--preset--font-family--widescreen, "widescreen", sans-serif) !important;
	font-weight: 300 !important;
	font-size: 18px !important;
	line-height: 1.5 !important;
	color: #162227 !important;
}

/* Form block (#12895:2840) */
.ocx-contact-hero__form-section {
	display: flex !important;
	flex-direction: column !important;
	gap: 20px !important;
	width: 100% !important;
}

.ocx-contact-hero__form-header {
	display: flex !important;
	flex-direction: column !important;
	gap: 16px !important;
}

.ocx-contact-hero__form-heading {
	margin: 0 !important;
	font-family: var(--wp--preset--font-family--widescreen, "widescreen", sans-serif) !important;
	font-weight: 400 !important;
	font-size: 36px !important;
	line-height: 1.3 !important;
	letter-spacing: -0.01em !important;
	color: #162227 !important;
}

.ocx-contact-hero__form-lead {
	margin: 0 !important;
	font-family: var(--wp--preset--font-family--widescreen, "widescreen", sans-serif) !important;
	font-weight: 400 !important;
	font-size: 18px !important;
	line-height: 1.5 !important;
	color: #162227 !important;
}

/* Form card (#12895:2846) */
.ocx-contact-hero__form-wrap {
	box-sizing: border-box !important;
	padding: 36px !important;
	background: #FAF8F4 !important;
	border: var(--Stroke-Hairline, 0.5px) solid var(--Color-OpenCX-Dune-Light, #CBBB85) !important;
	border-radius: var(--Radius-Medium, 20px) !important;
	width: 100% !important;
}

.ocx-contact-form {
	display: flex !important;
	flex-direction: column !important;
	gap: 24px !important;
	width: 100% !important;
}

.ocx-contact-submit-btn {
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	padding: 12px 32px !important;
	background-color: #B69E52 !important;
	color: #FFFFFF !important;
	border: 1px solid #B69E52 !important;
	border-radius: 0 !important;
	font-family: var(--wp--preset--font-family--widescreen, "widescreen", sans-serif) !important;
	font-weight: 500 !important;
	font-size: 16px !important;
	cursor: pointer !important;
	text-decoration: none !important;
	transition: background-color 0.2s ease, opacity 0.2s ease !important;
}

.ocx-contact-submit-btn:hover {
	background-color: #9E8842 !important;
	color: #FFFFFF !important;
}

.ocx-contact-submit-btn:disabled {
	opacity: 0.6 !important;
	cursor: not-allowed !important;
}

/* Zoho CRM Form Enhancements & Captcha */
.ocx-c4__required {
	color: #B69E52;
	font-weight: 700;
	margin-left: 2px;
}

.ocx-c4__captcha-block {
	display: flex;
	flex-direction: column;
	gap: 12px;
	margin: 4px 0 12px;
	padding: 18px 20px;
	background: rgba(182, 158, 82, 0.08);
	border: 1px solid rgba(182, 158, 82, 0.35);
	border-radius: 12px;
}

.ocx-c4__captcha-row {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 16px;
}

.ocx-c4__captcha-img-box {
	display: flex;
	align-items: center;
	gap: 12px;
}

.ocx-c4__captcha-img {
	height: 48px;
	border-radius: 6px;
	border: 1px solid #CBBB85;
	background: #FFFFFF;
	display: block;
}

.ocx-c4__captcha-reload {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	background: #FFFFFF;
	border: 1px solid #B69E52;
	color: #162227;
	padding: 8px 14px;
	border-radius: 6px;
	font-family: var(--wp--preset--font-family--widescreen, "widescreen", sans-serif);
	font-size: 13px;
	cursor: pointer;
	transition: all 0.2s ease;
}

.ocx-c4__captcha-reload:hover {
	background: #B69E52;
	color: #FFFFFF;
}

.ocx-c4__captcha-input-box {
	flex: 1;
	min-width: 180px;
}

.ocx-c4__error-msg {
	color: #D32F2F;
	font-size: 12px;
	font-family: var(--wp--preset--font-family--widescreen, "widescreen", sans-serif);
	margin-top: 6px;
	display: none;
}

.ocx-c4__privacy-wrap {
	display: flex;
	flex-direction: column;
	gap: 6px;
}

/* Zoho Contact Form Success State */
.ocx-contact-success {
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	padding: 48px 24px;
	gap: 20px;
}

.ocx-contact-success__icon {
	width: 72px;
	height: 72px;
	border-radius: 50%;
	background: rgba(182, 158, 82, 0.15);
	border: 1px solid rgba(182, 158, 82, 0.4);
	display: flex;
	align-items: center;
	justify-content: center;
	margin-bottom: 8px;
}

.ocx-contact-success__title {
	font-family: var(--wp--preset--font-family--widescreen, "widescreen", sans-serif);
	font-size: 28px;
	font-weight: 600;
	color: #162227;
	margin: 0;
}

.ocx-contact-success__lead {
	font-family: var(--wp--preset--font-family--widescreen, "widescreen", sans-serif);
	font-size: 16px;
	line-height: 1.6;
	color: #4A5568;
	max-width: 440px;
	margin: 0;
}

.ocx-contact-success__actions {
	margin-top: 16px;
}

.ocx-contact-success__actions .ocx-contact-submit-btn {
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	padding: 12px 32px !important;
	background-color: #B69E52 !important;
	color: #FFFFFF !important;
	border: 1px solid #B69E52 !important;
	border-radius: 0 !important;
	font-family: var(--wp--preset--font-family--widescreen, "widescreen", sans-serif) !important;
	font-weight: 500 !important;
	font-size: 16px !important;
	cursor: pointer !important;
	text-decoration: none !important;
	transition: background-color 0.2s ease, opacity 0.2s ease !important;
}

.ocx-contact-success__actions .ocx-contact-submit-btn:hover {
	background-color: #9E8842 !important;
	color: #FFFFFF !important;
}

/* Responsive */
@media (max-width: 1199.98px) {
	.ocx-section.ocx-contact-hero__section {
		padding: 0 10px !important;
	}

	.ocx-contact-hero__outer,
	.ocx-contact-hero__container {
		width: 100% !important;
		max-width: 100% !important;
		margin: 0 auto !important;
	}

	.ocx-contact-hero__container {
		padding: 40px 24px 60px 24px !important;
		border-radius: 16px !important;
	}

	.ocx-contact-hero__grid {
		grid-template-columns: minmax(0, 1fr) !important;
		gap: 32px !important;
	}

	.ocx-contact-hero__col-spacer {
		display: none !important;
	}

	.ocx-contact-hero__title {
		font-size: 36px !important;
	}

	.ocx-contact-hero__form-heading {
		font-size: 28px !important;
	}

	.ocx-contact-hero__form-wrap {
		padding: 24px 20px !important;
		border-radius: 16px !important;
	}
}

@media (max-width: 575.98px) {
	.ocx-contact-hero__container {
		padding: 32px 16px 48px 16px !important;
	}

	.ocx-contact-hero__title {
		font-size: 30px !important;
	}

	.ocx-contact-hero__lead {
		font-size: 16px !important;
	}

	.ocx-contact-hero__form-wrap {
		padding: 20px 16px !important;
	}

	.ocx-contact-submit-btn {
		width: 100% !important;
	}
}

/* Global container */
.container-global{max-width:var(--Container-container-large,1280px);margin:0 auto;padding:0 var(--Page-Padding-padding-global,64px);width:100%;box-sizing:border-box;}
@media (max-width:1199.98px){.container-global{padding:0 20px;}}
@media (max-width:991.98px){.container-global{padding:0 10px !important;}}

/* 1. Posicionar los fondos absolutamente para que no empujen el contenido */
.ocx-solaas-hero__bg-gradient,
.ocx-solaas-hero__bg-texture {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    z-index: 1 !important;
    pointer-events: none !important; /* Evita que bloqueen clics en el contenido */
}

/* 2. Contenedor padre con posición relativa para contener los fondos */
.ocx-solaas-hero__container {
    position: relative !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    overflow: hidden !important; /* Evita que nada se salga de los bordes curvos */
}

/* 3. Traer la tarjeta de contenido (texto + dashboard) al frente */
.ocx-solaas-hero__card {
    position: relative !important;
    z-index: 10 !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    width: 100% !important;
    padding-top: 80px !important; /* Espacio desde el borde superior */
}

/* ==========================================================================
   Resources Page (Figma 12875:1603 "Resources • Desktop VIEW #1")
   ========================================================================== */

/* Header variant for Resources */
.ocx-header--resources {
	background-color: var(--Color-OpenCX-White, #FCFBF9) !important;
}

/* Active state for Resources link in navbar */
.ocx-header--resources .ocx-nav-link[href*="resources"] {
	color: var(--Color-OpenCX-Dune, #B69E52) !important;
}

/* Base Page Wrapper */
.ocx-resources-page {
	width: 100%;
	background-color: var(--Color-OpenCX-White, #FCFBF9);
	box-sizing: border-box;
}

/* --------------------------------------------------------------------------
   1. Hero - Insights / Resources (Figma 12875:1605)
   -------------------------------------------------------------------------- */
.ocx-res-hero__section {
	width: 100%;
	padding: 0 var(--Section-Padding-padding-section-medium, 80px);
	background-color: var(--Color-OpenCX-White, #FCFBF9);
	display: flex;
	justify-content: center;
	align-items: center;
	box-sizing: border-box;
}

.ocx-res-hero__outer {
	width: 100%;
	max-width: var(--Container-container-large, 1280px);
	min-height: 383px;
	background-color: var(--Color-OpenCX-Dune-Lightest, #F8F6F0);
	border: var(--Stroke-Hairline, 0.5px) solid var(--Color-OpenCX-Dune-Light, #CBBB85);
	box-sizing: border-box;
	display: flex;
	margin-inline: auto;
}

.ocx-res-hero__card {
	width: 100%;
	min-height: 383px;
	border-radius: var(--Radius-Medium, 20px);
	border: var(--Stroke-Hairline, 0.5px) solid var(--Color-OpenCX-Dune-Light, #CBBB85);
	background-color: var(--Color-Voodoo, #4A2B4F);
	padding: 112px var(--Section-Padding-padding-section-medium, 80px);
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
}

.ocx-res-hero__content {
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	gap: 24px;
	max-width: 890px;
	width: 100%;
}

.ocx-res-hero__tagline {
	font-family: var(--wp--preset--font-family--widescreen, 'Widescreen', sans-serif);
	font-size: 22px;
	font-weight: 400;
	line-height: 1.5;
	color: var(--Color-OpenCX-Dune-Lighter, #F0EBDC);
	margin: 0;
	text-align: center;
}

.ocx-res-hero__title {
	font-family: var(--wp--preset--font-family--widescreen, 'Widescreen', sans-serif);
	font-size: 55px;
	font-weight: 400;
	line-height: 1;
	letter-spacing: -0.01em;
	color: var(--Color-OpenCX-Dune-Lighter, #F0EBDC);
	margin: 0;
	text-align: center;
}

.ocx-res-hero__accent {
	color: var(--Color-OpenCX-Dune-Light, #CBBB85);
	font-family: var(--wp--preset--font-family--widescreen-ex, "Widescreen Ex", "widescreen-ex", sans-serif) !important;
	letter-spacing: -0.03em;
}

/* --------------------------------------------------------------------------
   2. Textured Divider with Filters (Figma 12875:1615)
   -------------------------------------------------------------------------- */
.ocx-res-divider__section {
	width: 100%;
	min-height: 161px;
	padding: 0 var(--Section-Padding-padding-section-medium, 80px);
	background-color: var(--Color-OpenCX-White, #FCFBF9);
	display: flex;
	justify-content: center;
	align-items: center;
	box-sizing: border-box;
}

.ocx-res-divider__container {
	width: 100%;
	max-width: var(--Container-container-large, 1280px);
	height: 161px;
	min-height: 161px;
	margin-inline: auto;
	border-top: var(--Stroke-Hairline, 0.5px) solid var(--Color-OpenCX-Dune-Light, #CBBB85);
	border-bottom: var(--Stroke-Hairline, 0.5px) solid var(--Color-OpenCX-Dune-Light, #CBBB85);
	border-left: var(--Stroke-Hairline, 0.5px) solid var(--Color-OpenCX-Dune-Light, #CBBB85);
	border-right: var(--Stroke-Hairline, 0.5px) solid var(--Color-OpenCX-Dune-Light, #CBBB85);
	background-image: url('../images/pattern-tile.svg');
	background-repeat: repeat;
	background-size: 60px 60px;
	display: flex;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
}

.ocx-res-divider__filters {
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: center;
	gap: 80px;
}

.ocx-res-filter-btn {
	width: auto;
	min-width: 177px;
	height: 44px;
	padding: 10px 24px;
	white-space: nowrap;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-family: var(--wp--preset--font-family--widescreen, 'Widescreen', sans-serif);
	font-size: 16px;
	line-height: 1.5;
	font-weight: 400;
	text-decoration: none;
	cursor: pointer;
	border-radius: 0;
	border: var(--Stroke-Hairline, 0.5px) solid var(--Color-OpenCX-Dune, #B69E52);
	background-color: var(--Color-OpenCX-Dune-Lightest, #F8F6F0);
	color: var(--Color-OpenCX-Dune, #B69E52);
	box-sizing: border-box;
	transition: all 0.2s ease;
}

.ocx-res-filter-btn:hover {
	background-color: var(--Color-OpenCX-Dune-Lighter, #F0EBDC);
}

.ocx-res-filter-btn--active {
	background-color: var(--Color-OpenCX-Dune-Lighter, #F0EBDC);
	border-color: var(--Color-OpenCX-Dune, #B69E52);
	color: var(--Color-OpenCX-Dune, #B69E52);
}

/* --------------------------------------------------------------------------
   3. Client perspective Section (Figma 12875:1625)
   -------------------------------------------------------------------------- */
.ocx-res-perspective__section {
	width: 100%;
	padding: 0 var(--Section-Padding-padding-section-medium, 80px);
	background-color: var(--Color-OpenCX-White, #FCFBF9);
	display: flex;
	justify-content: center;
	box-sizing: border-box;
}

.ocx-res-perspective__wrapper {
	width: 100%;
	max-width: var(--Container-container-large, 1280px);
	margin-inline: auto;
	box-sizing: border-box;
}

.ocx-res-perspective__outer {
	width: 100%;
	background-color: var(--Color-Blackberry-Light, #8F459C);
	border: var(--Stroke-Hairline, 0.5px) solid var(--Color-OpenCX-Dune-Light, #CBBB85);
	border-top: none;
	box-sizing: border-box;
	position: relative;
	display: flex;
}

.ocx-res-perspective__inner {
	width: calc(100% + 1px);
	margin: -0.5px;
	background-color: var(--Color-OpenCX-White, #FCFBF9);
	border: var(--Stroke-Hairline, 0.5px) solid var(--Color-OpenCX-Dune-Light, #CBBB85);
	border-radius: var(--Radius-Medium, 20px);
	padding: 0 48px var(--Section-Padding-padding-section-medium, 80px) 48px;
	box-sizing: border-box;
	position: relative;
	z-index: 1;
}

.ocx-res-perspective__header {
	padding: var(--Section-Padding-padding-section-medium, 80px) 0;
}

.ocx-res-perspective__heading {
	font-family: var(--wp--preset--font-family--widescreen, 'Widescreen', sans-serif);
	font-size: 55px;
	font-weight: 400;
	line-height: 1;
	letter-spacing: -0.01em;
	color: var(--Color-Neutral-Darkest, #000000);
	margin: 0;
}

.ocx-res-perspective__grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 80px 20px;
	border-radius: var(--Radius-Medium, 20px);
}

.ocx-res-card {
	min-height: 398px;
	padding: 20px;
	background-color: var(--Color-OpenCX-Dune-Lightest, #F8F6F0);
	border: var(--Stroke-Hairline, 0.5px) solid var(--Color-OpenCX-Dune-Light, #CBBB85);
	border-radius: var(--Radius-Medium, 20px);
	display: flex;
	flex-direction: row;
	align-items: flex-end;
	justify-content: space-between;
	gap: 20px;
	box-sizing: border-box;
	position: relative;
	cursor: pointer;
	transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.ocx-res-card:not(.ocx-res-card--placeholder):hover {
	transform: translateY(-2px);
	box-shadow: 0 4px 16px rgba(0, 0, 0, 0.05);
}

.ocx-res-card__overlay-link {
	position: absolute;
	inset: 0;
	z-index: 2;
}

.ocx-res-card__body {
	flex: 1 1 auto;
	min-width: 0;
	max-width: calc(100% - 194px);
	min-height: 224px;
	height: auto;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	box-sizing: border-box;
}

.ocx-res-card__tagline {
	font-family: var(--wp--preset--font-family--widescreen, 'Widescreen', sans-serif);
	font-size: 20px;
	font-weight: 400;
	line-height: 1.4;
	color: var(--Color-Blackberry-Light, #8F459C);
}

.ocx-res-card__title {
	font-family: var(--wp--preset--font-family--widescreen, 'Widescreen', sans-serif);
	font-size: clamp(22px, 2.2vw, 30px);
	font-weight: 400;
	line-height: 1.25;
	letter-spacing: -0.01em;
	color: var(--Color-Neutral-Darkest, #000000);
	margin: 0;
	overflow-wrap: break-word;
	word-break: break-word;
}

.ocx-res-card__title a {
	color: inherit;
	text-decoration: none;
}

.ocx-res-card__media {
	display: flex;
	align-items: flex-end;
	flex-shrink: 0;
}

.ocx-res-card__img {
	width: 174px;
	height: 186px;
	border-radius: var(--Radius-Small, 16px);
	border: var(--Stroke-Hairline, 0.5px) solid var(--Color-OpenCX-Dune-Light, #CBBB85);
	object-fit: cover;
	display: block;
}

.ocx-res-card--placeholder {
	min-height: 398px;
	background-color: var(--Color-OpenCX-Dune-Lightest, #F8F6F0);
	border: var(--Stroke-Hairline, 0.5px) solid var(--Color-OpenCX-Dune-Light, #CBBB85);
	border-radius: var(--Radius-Medium, 20px);
	cursor: default;
}

.ocx-res-card.is-active {
	border-color: var(--Color-Blackberry-Light, #8F459C);
	box-shadow: 0 0 0 1.5px var(--Color-Blackberry-Light, #8F459C);
}

/* --------------------------------------------------------------------------
   Pagination Controls (Desktop & Mobile)
   -------------------------------------------------------------------------- */
.ocx-pagination {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 12px;
	margin-top: 56px;
	width: 100%;
	box-sizing: border-box;
}

.ocx-pagination__btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 44px;
	height: 44px;
	padding: 0 16px;
	border-radius: var(--Radius-Medium, 20px);
	border: var(--Stroke-Hairline, 0.5px) solid var(--Color-OpenCX-Dune-Light, #CBBB85);
	background-color: var(--Color-OpenCX-Dune-Lightest, #F8F6F0);
	color: var(--Color-Neutral-Darkest, #000000);
	font-family: var(--wp--preset--font-family--widescreen, 'Widescreen', sans-serif);
	font-size: 14px;
	letter-spacing: -0.01em;
	cursor: pointer;
	transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
	user-select: none;
	text-decoration: none;
	box-sizing: border-box;
}

.ocx-pagination__btn:hover:not(:disabled):not(.is-active) {
	background-color: var(--Color-OpenCX-Dune-Lighter, #F0EBDC);
	border-color: var(--Color-OpenCX-Dune, #B69E52);
	transform: translateY(-1px);
}

.ocx-pagination__btn.is-active {
	background-color: var(--Color-Blackberry-Light, #8F459C);
	border-color: var(--Color-Blackberry-Light, #8F459C);
	color: #FFFFFF;
	font-weight: 500;
	cursor: default;
}

.ocx-pagination__btn:disabled,
.ocx-pagination__btn.is-disabled {
	opacity: 0.3;
	cursor: not-allowed;
	pointer-events: none;
}

.ocx-pagination__btn--prev,
.ocx-pagination__btn--next {
	gap: 8px;
	padding: 0 20px;
}

.ocx-pagination__numbers {
	display: flex;
	align-items: center;
	gap: 8px;
}

.ocx-pagination__mobile-info {
	display: none;
	font-family: var(--wp--preset--font-family--widescreen, 'Widescreen', sans-serif);
	font-size: 14px;
	color: var(--Color-Neutral-Darkest, #000000);
	font-weight: 500;
	letter-spacing: -0.01em;
	padding: 0 8px;
	white-space: nowrap;
}

.ocx-res-perspective__inner > p:empty,
.ocx-res-perspective__inner > p {
	margin: 0;
	padding: 0;
}

.ocx-interview-expand-container {
	width: 100%;
	position: relative;
}

.ocx-interview-panel {
	display: none;
	opacity: 0;
	visibility: hidden;
	box-sizing: border-box;
}

.ocx-interview-panel.is-open {
	display: block;
	opacity: 1;
	visibility: visible;
	margin-top: 60px;
	border-top: 0.5px solid var(--Color-OpenCX-Dune-Light, #CBBB85);
	padding-top: 60px;
}

.ocx-interview-panel__content {
	min-height: 0;
	overflow: hidden;
}

.ocx-interview-top-nav {
	display: flex;
	justify-content: flex-end;
	align-items: center;
	margin-bottom: 32px;
}

.ocx-interview-back-btn {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	background: var(--Color-OpenCX-Dune-Lightest, #F8F6F0);
	border: var(--Stroke-Hairline, 0.5px) solid var(--Color-OpenCX-Dune, #B69E52);
	padding: 8px 18px;
	font-family: var(--wp--preset--font-family--widescreen);
	font-size: 14px;
	color: var(--Color-OpenCX-Dune, #B69E52);
	cursor: pointer;
	transition: all 0.2s ease;
}

.ocx-interview-back-btn:hover {
	background-color: var(--Color-OpenCX-Dune-Lighter, #F0EBDC);
}

/* --------------------------------------------------------------------------
   4. Interview Detail Section (Figma 12875:1665)
   -------------------------------------------------------------------------- */
.ocx-interview-page {
	width: 100%;
	background-color: var(--Color-OpenCX-White, #FCFBF9);
}

.ocx-interview__section {
	width: 100%;
	padding: 0 var(--Section-Padding-padding-section-medium, 80px);
	background-color: var(--Color-OpenCX-White, #FCFBF9);
	display: flex;
	justify-content: center;
	box-sizing: border-box;
}

.ocx-interview__wrapper {
	width: 100%;
	max-width: var(--Container-container-large, 1280px);
	margin-inline: auto;
	box-sizing: border-box;
}

.ocx-interview__outer {
	width: 100%;
	background-color: var(--Color-Blackberry-Light, #8F459C);
	border: var(--Stroke-Hairline, 0.5px) solid var(--Color-OpenCX-Dune-Light, #CBBB85);
	border-top: none;
	box-sizing: border-box;
	position: relative;
	display: flex;
}

.ocx-interview__inner {
	width: calc(100% + 1px);
	margin: -0.5px;
	background-color: var(--Color-OpenCX-White, #FCFBF9);
	border: var(--Stroke-Hairline, 0.5px) solid var(--Color-OpenCX-Dune-Light, #CBBB85);
	border-radius: var(--Radius-Medium, 20px);
	padding: 0 80px 80px 80px;
	box-sizing: border-box;
	position: relative;
	z-index: 1;
}

.ocx-interview__header {
	padding: 80px 0 53px 0;
}

.ocx-interview__heading {
	font-family: var(--wp--preset--font-family--widescreen, 'Widescreen', sans-serif);
	font-size: 55px;
	font-weight: 400;
	line-height: 1;
	letter-spacing: -0.01em;
	color: var(--Color-Neutral-Darkest, #000000);
	margin: 0;
}

.ocx-interview__main {
	width: 100%;
	max-width: 800px;
	margin-left: auto;
	box-sizing: border-box;
}

.ocx-interview__author {
	display: flex;
	flex-direction: row;
	align-items: flex-start;
	gap: 40px;
	margin-bottom: 48px;
}

.ocx-interview__avatar {
	width: 236px;
	height: 252px;
	object-fit: cover;
	border-radius: var(--Radius-Small, 16px);
	border: var(--Stroke-Hairline, 0.5px) solid var(--Color-OpenCX-Dune-Light, #CBBB85);
	flex-shrink: 0;
}

.ocx-interview__meta {
	display: flex;
	flex-direction: column;
	gap: 16px;
	justify-content: center;
	padding-top: 8px;
}

.ocx-interview__tagline {
	font-family: var(--wp--preset--font-family--widescreen, 'Widescreen', sans-serif);
	font-size: 22px;
	font-weight: 400;
	line-height: 1.55;
	color: var(--Color-Blackberry-Light, #8F459C);
	margin: 0;
}

.ocx-interview__name {
	font-family: var(--wp--preset--font-family--manrope, 'Manrope', sans-serif);
	font-size: 52px;
	font-weight: 500;
	line-height: 1.2;
	letter-spacing: -0.01em;
	color: var(--Color-Neutral-Darkest, #000000);
	margin: 0;
}

.ocx-interview__qa-list {
	border-top: 1px solid var(--Color-OpenCX-Dune-Light, #CBBB85);
	padding: 48px 0 0 0;
	display: flex;
	flex-direction: column;
	gap: 32px;
}

.ocx-interview__qa-item {
	display: flex;
	flex-direction: column;
	gap: 8px;
	padding-top: 8px;
}

.ocx-interview__qa-speaker {
	font-family: var(--wp--preset--font-family--widescreen, 'Widescreen', sans-serif);
	font-size: 18px;
	font-weight: 400;
	line-height: 1.5;
	color: var(--Color-OpenCX-Dune, #917E41);
	margin: 0;
}

.ocx-interview__qa-text {
	font-family: var(--wp--preset--font-family--widescreen, 'Widescreen', sans-serif);
	font-size: 16px;
	font-weight: 300;
	line-height: 1.5;
	color: var(--Color-Neutral-Darkest, #000000);
	margin: 0;
}

.ocx-interview__qa-divider {
	border: none;
	height: 0.5px;
	background-color: var(--Color-OpenCX-Dune-Light, #CBBB85);
	margin: 20px 0 0 0;
	width: 100%;
}

.ocx-interview__actions {
	display: flex;
	justify-content: flex-end;
	align-items: center;
	padding: 24px 0 20px 0;
	border-bottom: var(--Stroke-Hairline, 0.5px) solid var(--Color-OpenCX-Dune-Light, #CBBB85);
}

.ocx-interview__top-btn {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	background: transparent;
	border: none;
	padding: 0;
	margin: 0;
	font-family: var(--wp--preset--font-family--manrope, 'Manrope', sans-serif);
	font-size: 16px;
	font-weight: 500;
	line-height: 1.5;
	color: var(--Color-OpenCX-Dune, #B69E52);
	text-decoration: none;
	cursor: pointer;
	transition: opacity 0.2s ease, transform 0.2s ease;
}

.ocx-interview__top-btn:hover {
	opacity: 0.75;
	transform: translateX(2px);
}

.ocx-interview__top-btn svg {
	width: 20px;
	height: 20px;
	stroke: currentColor;
	stroke-width: 1.5px;
	fill: none;
	flex-shrink: 0;
}

.ocx-interview__more-header {
	grid-column: 1 / -1;
	margin-bottom: 8px;
}

.ocx-interview__more-heading {
	font-family: var(--wp--preset--font-family--widescreen, 'Widescreen', sans-serif);
	font-size: clamp(24px, 2.5vw, 32px);
	font-weight: 400;
	color: var(--Color-Neutral-Darkest, #000000);
	margin: 0;
}

.ocx-interview__more {
	padding: 80px 0 0 0;
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 20px;
}

@media (max-width: 991px) {
	.ocx-interview__more {
		grid-template-columns: 1fr;
	}
}

.ocx-interview__more-card {
	min-height: 200px;
	padding: 20px;
	background-color: var(--Color-OpenCX-Dune-Lightest, #F8F6F0);
	border: var(--Stroke-Hairline, 0.5px) solid var(--Color-OpenCX-Dune-Light, #CBBB85);
	border-radius: var(--Radius-Medium, 20px);
	display: flex;
	flex-direction: row;
	align-items: flex-end;
	justify-content: space-between;
	gap: 16px;
	box-sizing: border-box;
	text-decoration: none;
	color: inherit;
	cursor: pointer;
	transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.ocx-interview__more-card:hover {
	transform: translateY(-2px);
	box-shadow: 0 4px 16px rgba(0, 0, 0, 0.05);
}

.ocx-interview__more-body {
	flex: 1 1 auto;
	min-width: 0;
	min-height: 150px;
	height: auto;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	gap: 12px;
}

.ocx-interview__more-tagline {
	font-family: var(--wp--preset--font-family--widescreen, 'Widescreen', sans-serif);
	font-size: 14px;
	line-height: 1.4;
	color: var(--Color-Blackberry-Light, #8F459C);
}

.ocx-interview__more-title {
	font-family: var(--wp--preset--font-family--widescreen, 'Widescreen', sans-serif);
	font-size: clamp(16px, 1.3vw, 20px);
	font-weight: 400;
	line-height: 1.25;
	letter-spacing: -0.01em;
	color: var(--Color-Neutral-Darkest, #000000);
	margin: 0;
	hyphens: none;
	word-break: normal;
	overflow-wrap: break-word;
}

.ocx-interview__more-img {
	width: 120px;
	height: 130px;
	object-fit: cover;
	border-radius: var(--Radius-Small, 14px);
	border: var(--Stroke-Hairline, 0.5px) solid var(--Color-OpenCX-Dune-Light, #CBBB85);
	flex-shrink: 0;
}

/* --------------------------------------------------------------------------
   Article / In-Page Content Styles (Blog & Newsroom)
   -------------------------------------------------------------------------- */
.ocx-article__header {
	margin-bottom: 32px;
}

.ocx-article__meta {
	display: flex;
	flex-direction: column;
	gap: 16px;
}

.ocx-article__title {
	font-family: var(--wp--preset--font-family--widescreen, 'Widescreen', sans-serif);
	font-size: clamp(32px, 3.8vw, 50px);
	font-weight: 400;
	line-height: 1.18;
	letter-spacing: -0.015em;
	color: var(--Color-Neutral-Darkest, #000000);
	margin: 0;
}

.ocx-article__byline {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 12px;
	font-family: var(--wp--preset--font-family--manrope, 'Manrope', sans-serif);
	font-size: 15px;
	color: #666;
}

.ocx-article__byline a {
	color: var(--Color-Blackberry-Light, #8F459C);
	text-decoration: none;
}

.ocx-article__byline a:hover {
	text-decoration: underline;
}

.ocx-article__sep {
	color: var(--Color-OpenCX-Dune-Light, #CBBB85);
}

.ocx-article__featured-wrap {
	width: 100%;
	margin: 24px 0 40px 0;
}

.ocx-article__featured-img {
	width: 100%;
	max-height: 480px;
	object-fit: cover;
	border-radius: var(--Radius-Small, 16px);
	border: var(--Stroke-Hairline, 0.5px) solid var(--Color-OpenCX-Dune-Light, #CBBB85);
	display: block;
}

.ocx-article__content {
	border-top: 1px solid var(--Color-OpenCX-Dune-Light, #CBBB85);
	padding: 40px 0 0 0;
	font-family: var(--wp--preset--font-family--widescreen, "widescreen", sans-serif) !important;
	font-weight: 300 !important;
	font-size: 18px;
	line-height: 1.75;
	color: var(--Color-Neutral-Darker, #191919);
}

.ocx-article__lead {
	font-family: var(--wp--preset--font-family--widescreen, "widescreen", sans-serif) !important;
	font-size: 21px;
	line-height: 1.6;
	color: var(--Color-Neutral-Darkest, #000000);
	font-weight: 400 !important;
	margin-bottom: 28px;
}

.ocx-article__content h1,
.ocx-article__content h2,
.ocx-article__content h3,
.ocx-article__content h4,
.ocx-article__content h5,
.ocx-article__content h6,
.ocx-article__content h1 *,
.ocx-article__content h2 *,
.ocx-article__content h3 *,
.ocx-article__content h4 *,
.ocx-article__content h5 *,
.ocx-article__content h6 * {
	font-family: var(--wp--preset--font-family--widescreen, "widescreen", sans-serif) !important;
	font-weight: 400 !important;
	color: var(--Color-Neutral-Darkest, #000000);
	margin: 36px 0 16px 0;
	line-height: 1.25;
	letter-spacing: -0.01em;
}

.ocx-article__content h2 {
	font-size: 32px;
}

.ocx-article__content h3 {
	font-size: 24px;
}

.ocx-article__content p,
.ocx-article__content p *,
.ocx-article__content li,
.ocx-article__content li * {
	font-family: var(--wp--preset--font-family--widescreen, "widescreen", sans-serif) !important;
	font-weight: 300 !important;
}

.ocx-article__content p {
	margin-bottom: 24px;
	line-height: 1.75;
}

.ocx-article__content p strong,
.ocx-article__content p b,
.ocx-article__content p strong *,
.ocx-article__content p b * {
	font-family: var(--wp--preset--font-family--widescreen, "widescreen", sans-serif) !important;
	font-weight: 600 !important;
}

.ocx-article__content blockquote {
	border-left: 3px solid var(--Color-Blackberry-Light, #8F459C);
	background: rgba(143, 69, 156, 0.04);
	padding: 16px 24px;
	margin: 28px 0;
	font-style: italic;
	border-radius: 0 12px 12px 0;
}

.ocx-article__content ul,
.ocx-article__content ol {
	padding-left: 28px;
	margin-bottom: 24px;
}

.ocx-article__content li {
	margin-bottom: 8px;
}

.ocx-article__ext-action {
	margin: 32px 0 12px 0;
}

.ocx-btn-secondary {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	background: var(--Color-OpenCX-Dune-Lightest, #F8F6F0);
	border: var(--Stroke-Hairline, 0.5px) solid var(--Color-OpenCX-Dune, #B69E52);
	border-radius: 0px;
	padding: 12px 24px;
	font-family: var(--wp--preset--font-family--widescreen, sans-serif);
	font-size: 14px;
	color: var(--Color-Neutral-Darkest, #000000);
	text-decoration: none;
	cursor: pointer;
	transition: all 0.2s ease;
}

.ocx-btn-secondary:hover {
	background-color: var(--Color-OpenCX-Dune-Lighter, #F0EBDC);
	color: var(--Color-Blackberry-Light, #8F459C);
}

/* Author filter trigger button in article byline */
.ocx-author-filter-btn {
	background: none;
	border: none;
	padding: 0;
	font: inherit;
	color: #1B2428;
	cursor: pointer;
	text-decoration: underline;
	text-decoration-color: var(--Color-OpenCX-Dune, #B69E52);
	text-underline-offset: 3px;
	transition: all 0.15s ease;
}

.ocx-author-filter-btn:hover {
	color: var(--Color-OpenCX-Dune, #B69E52);
}

/* Article Tags List & Capsule Pills (matching Home design) */
.ocx-article__tags {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 10px;
	margin-top: 18px;
}

.ocx-article__tags-label {
	display: inline-flex;
	align-items: center;
	font-family: var(--wp--preset--font-family--widescreen, 'Widescreen', sans-serif);
	font-size: 11px;
	font-weight: 500;
	color: var(--Color-Neutral, #7F7F7F);
	text-transform: uppercase;
	letter-spacing: 0.08em;
	margin-right: 2px;
	line-height: 1;
}

.ocx-tag-pill {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 5px;
	height: 34px;
	padding: 0 16px;
	border-radius: 9999px; /* Modern capsule shape matching home pills */
	background: #FAF8F4;
	border: 1px solid var(--Color-OpenCX-Dune, #B69E52);
	font-family: var(--wp--preset--font-family--widescreen, 'Widescreen', sans-serif);
	font-size: 12.5px;
	font-weight: 500;
	color: #1B2428;
	cursor: pointer;
	box-sizing: border-box;
	white-space: nowrap;
	line-height: 1;
	vertical-align: middle;
	box-shadow: 0 2px 8px rgba(182, 158, 82, 0.12);
	transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
	outline: none;
	user-select: none;
	margin: 0;
	-webkit-appearance: none;
	appearance: none;
}

.ocx-tag-pill:hover {
	background: #F0EBDC;
	border-color: var(--Color-OpenCX-Dune, #B69E52);
	color: #1B2428;
	transform: translateY(-1px);
	box-shadow: 0 4px 12px rgba(182, 158, 82, 0.22);
}

.ocx-tag-pill:active {
	transform: translateY(0);
}

.ocx-tag-pill:focus-visible {
	border-color: var(--Color-OpenCX-Dune, #B69E52);
	box-shadow: 0 0 0 2px rgba(182, 158, 82, 0.3);
}

.ocx-tag-pill__hash {
	color: var(--Color-OpenCX-Dune, #B69E52);
	font-weight: 600;
	font-size: 13px;
	line-height: 1;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	transform: translateY(-0.5px);
}

.ocx-tag-pill__text {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	line-height: 1;
	color: #1B2428;
}

/* Active Filter Bar on Resources Grid */
.ocx-res-active-filter-bar {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	padding: 12px 20px;
	background: var(--Color-OpenCX-Dune-Lightest, #F8F6F0);
	border: var(--Stroke-Hairline, 0.5px) solid var(--Color-OpenCX-Dune-Light, #CBBB85);
	border-radius: var(--Radius-Medium, 20px);
	margin-bottom: 32px;
	animation: ocxFilterBarFadeIn 0.3s ease;
}

@keyframes ocxFilterBarFadeIn {
	from { opacity: 0; transform: translateY(-6px); }
	to { opacity: 1; transform: translateY(0); }
}

.ocx-res-filter-chip {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	background: #FAF8F4;
	padding: 6px 14px 6px 16px;
	border-radius: 9999px;
	border: 1px solid var(--Color-OpenCX-Dune, #B69E52);
	font-family: var(--wp--preset--font-family--widescreen, sans-serif);
	font-size: 12.5px;
	font-weight: 500;
	color: #1B2428;
	box-shadow: 0 2px 8px rgba(182, 158, 82, 0.12);
}

.ocx-res-filter-chip strong {
	color: #1B2428;
	font-weight: 600;
}

.ocx-res-filter-clear-btn {
	background: rgba(182, 158, 82, 0.18);
	border: none;
	width: 20px;
	height: 20px;
	border-radius: 50%;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-size: 14px;
	color: #604E1D;
	cursor: pointer;
	line-height: 1;
	transition: all 0.18s ease;
}

.ocx-res-filter-clear-btn:hover {
	background: var(--Color-OpenCX-Dune, #B69E52);
	color: #FFFFFF;
	transform: scale(1.1);
}

.ocx-res-filter-count {
	font-family: var(--wp--preset--font-family--widescreen, sans-serif);
	font-size: 12.5px;
	color: var(--Color-Neutral, #7F7F7F);
}

/* Media Figures (Uploaded Photos & Local Videos) */
.ocx-media-figure {
	margin: 32px 0;
	max-width: 100%;
}

.ocx-media-figure img,
.ocx-media-figure video {
	width: 100%;
	display: block;
	border-radius: var(--Radius-Small, 16px);
	border: var(--Stroke-Hairline, 0.5px) solid var(--Color-OpenCX-Dune-Light, #CBBB85);
	background: #000;
}

.ocx-media-figure figcaption {
	font-family: var(--wp--preset--font-family--manrope, sans-serif);
	font-size: 13px;
	color: var(--Color-Neutral, #7F7F7F);
	text-align: center;
	margin-top: 10px;
	font-style: italic;
}

/* Responsive YouTube & Video Embeds */
.ocx-embed-responsive {
	position: relative;
	width: 100%;
	padding-bottom: 56.25%; /* 16:9 ratio */
	height: 0;
	overflow: hidden;
	border-radius: var(--Radius-Small, 16px);
	border: var(--Stroke-Hairline, 0.5px) solid var(--Color-OpenCX-Dune-Light, #CBBB85);
	margin: 32px 0;
	background: #000000;
}

.ocx-embed-responsive iframe,
.ocx-embed-responsive object,
.ocx-embed-responsive embed {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	border: 0;
}

/* Podcast & Audio Player Card */
.ocx-podcast-card {
	display: flex;
	align-items: center;
	gap: 18px;
	background: var(--Color-OpenCX-Dune-Lightest, #F8F6F0);
	border: var(--Stroke-Hairline, 0.5px) solid var(--Color-OpenCX-Dune-Light, #CBBB85);
	border-radius: var(--Radius-Small, 16px);
	padding: 20px 24px;
	margin: 32px 0;
	box-shadow: 0 4px 16px rgba(0, 0, 0, 0.02);
}

.ocx-podcast-icon {
	width: 48px;
	height: 48px;
	border-radius: 50%;
	background: var(--Color-Blackberry-Light, #8F459C);
	color: #FFFFFF;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
}

.ocx-podcast-details {
	flex: 1;
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.ocx-podcast-label {
	font-family: var(--wp--preset--font-family--widescreen, sans-serif);
	font-size: 13px;
	font-weight: 500;
	color: var(--Color-Neutral-Darkest, #000000);
	letter-spacing: 0.02em;
	text-transform: uppercase;
}

.ocx-podcast-details audio {
	width: 100%;
	height: 36px;
	border-radius: 20px;
	outline: none;
}

/* Editor media upload status & button pills */
.ocx-rich-btn-media {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	padding: 4px 8px;
	font-size: 12px;
	font-weight: 500;
}

.ocx-rich-upload-spinner {
	display: inline-block;
	width: 14px;
	height: 14px;
	border: 2px solid rgba(143, 69, 156, 0.2);
	border-top-color: var(--Color-Blackberry-Light, #8F459C);
	border-radius: 50%;
	animation: ocxSpin 0.7s linear infinite;
	vertical-align: middle;
	margin-right: 6px;
}

@keyframes ocxSpin {
	to { transform: rotate(360deg); }
}

/* --------------------------------------------------------------------------
   5. Footer Background Overrides for Resources & Interview
   -------------------------------------------------------------------------- */
.page-id-68 .ocx-footer,
.page-resources .ocx-footer,
.page-template-page-resources .ocx-footer,
.page-template-page-interview .ocx-footer,
body:has(.ocx-res-hero__section) .ocx-footer,
body:has(.ocx-interview-page) .ocx-footer {
	background-color: var(--Color-OpenCX-White, #FCFBF9) !important;
	background: var(--Color-OpenCX-White, #FCFBF9) !important;
}

/* --------------------------------------------------------------------------
   Resources & Interview Responsive Breakpoints
   -------------------------------------------------------------------------- */
@media (max-width: 1199.98px) {
	.ocx-res-hero__section,
	.ocx-res-divider__section,
	.ocx-res-perspective__section,
	.ocx-interview__section {
		padding: 0 10px !important;
	}

	.ocx-res-hero__outer,
	.ocx-res-divider__container,
	.ocx-res-perspective__wrapper,
	.ocx-interview__wrapper {
		width: 100% !important;
		max-width: 100% !important;
		margin: 0 auto !important;
	}

	.ocx-res-hero__card {
		padding: 64px 24px;
	}

	.ocx-res-hero__title {
		font-size: clamp(32px, 5vw, 55px);
	}

	.ocx-res-divider__filters {
		gap: 20px;
		flex-wrap: wrap;
	}

	.ocx-res-filter-btn {
		min-width: 150px;
		white-space: nowrap;
	}

	.ocx-res-perspective__inner,
	.ocx-interview__inner {
		padding: 0 24px 48px 24px;
	}

	.ocx-res-perspective__header,
	.ocx-interview__header {
		padding: 48px 0;
	}

	.ocx-res-perspective__heading,
	.ocx-interview__heading {
		font-size: clamp(32px, 5vw, 55px);
	}

	.ocx-res-perspective__grid {
		grid-template-columns: 1fr;
		gap: 40px;
	}

	.ocx-interview__name {
		font-size: clamp(32px, 4vw, 44px);
	}

	.ocx-interview__more {
		grid-template-columns: 1fr;
	}
}

@media (max-width: 767.98px) {
	.ocx-res-hero__section,
	.ocx-res-divider__section,
	.ocx-res-perspective__section,
	.ocx-interview__section {
		padding: 0 16px !important;
	}

	.ocx-res-hero__card {
		padding: 48px 16px !important;
		min-height: auto !important;
	}

	.ocx-res-hero__title {
		font-size: clamp(24px, 6.5vw, 36px) !important;
		line-height: 1.15 !important;
	}

	.ocx-res-divider__container {
		height: auto !important;
		min-height: 120px !important;
		padding: 24px 12px !important;
	}

	.ocx-res-divider__filters {
		display: flex !important;
		flex-direction: column !important;
		align-items: center !important;
		gap: 12px !important;
		width: 100% !important;
	}

	.ocx-res-filter-btn {
		width: auto !important;
		min-width: 200px !important;
		max-width: 320px !important;
		white-space: nowrap !important;
	}

	.ocx-res-perspective__inner,
	.ocx-interview__inner {
		padding: 0 16px 40px 16px !important;
	}

	.ocx-res-perspective__header,
	.ocx-interview__header {
		padding: 40px 0 !important;
	}

	.ocx-res-perspective__heading,
	.ocx-interview__heading {
		font-size: clamp(28px, 8vw, 42px) !important;
	}

	.ocx-res-perspective__grid {
		grid-template-columns: 1fr !important;
		gap: 24px !important;
	}

	.ocx-res-card {
		display: flex !important;
		flex-direction: row !important;
		align-items: flex-end !important;
		justify-content: space-between !important;
		min-height: 280px !important;
		height: auto !important;
		padding: 20px !important;
		gap: 16px !important;
		box-sizing: border-box !important;
	}

	.ocx-res-card__body {
		flex: 1 1 auto !important;
		min-width: 0 !important;
		max-width: calc(100% - 126px) !important;
		width: auto !important;
		min-height: 240px !important;
		height: 100% !important;
		display: flex !important;
		flex-direction: column !important;
		justify-content: space-between !important;
		box-sizing: border-box !important;
	}

	.ocx-res-card__tagline {
		font-size: 16px !important;
		line-height: 1.3 !important;
	}

	.ocx-res-card__title {
		font-size: clamp(17px, 4.6vw, 20px) !important;
		line-height: 1.25 !important;
		word-break: normal !important;
		overflow-wrap: normal !important;
		hyphens: none !important;
		-webkit-hyphens: none !important;
	}

	.ocx-res-card__media {
		width: auto !important;
		display: flex !important;
		align-items: flex-end !important;
		flex-shrink: 0 !important;
	}

	.ocx-res-card__img {
		width: 110px !important;
		height: 118px !important;
		border-radius: 12px !important;
		object-fit: cover !important;
		display: block !important;
	}

	.ocx-res-card--placeholder {
		min-height: 280px !important;
	}

	.ocx-pagination {
		display: flex !important;
		justify-content: space-between !important;
		align-items: center !important;
		gap: 12px !important;
		margin-top: 36px !important;
		width: 100% !important;
	}

	.ocx-pagination__numbers {
		display: none !important;
	}

	.ocx-pagination__mobile-info {
		display: inline-flex !important;
		align-items: center !important;
		justify-content: center !important;
	}

	.ocx-pagination__btn--prev,
	.ocx-pagination__btn--next {
		flex: 0 0 auto !important;
		min-width: 96px !important;
		height: 44px !important;
		padding: 0 14px !important;
		font-size: 13px !important;
	}

	.ocx-interview__author {
		flex-direction: column !important;
		align-items: flex-start !important;
		gap: 24px !important;
	}

	.ocx-interview__avatar {
		width: 180px !important;
		height: 192px !important;
	}

	.ocx-interview__name {
		font-size: clamp(28px, 7vw, 36px) !important;
	}

	.ocx-interview__more-card {
		display: flex !important;
		flex-direction: row !important;
		align-items: flex-end !important;
		justify-content: space-between !important;
		min-height: 200px !important;
		height: auto !important;
		padding: 20px !important;
		gap: 16px !important;
		box-sizing: border-box !important;
	}

	.ocx-interview__more-body {
		flex: 1 1 auto !important;
		min-width: 0 !important;
		max-width: calc(100% - 126px) !important;
		width: auto !important;
		height: 100% !important;
		min-height: 150px !important;
		display: flex !important;
		flex-direction: column !important;
		justify-content: space-between !important;
		gap: 16px !important;
		box-sizing: border-box !important;
	}

	.ocx-interview__more-title {
		font-size: clamp(17px, 4.6vw, 20px) !important;
		line-height: 1.25 !important;
		word-break: normal !important;
		overflow-wrap: normal !important;
		hyphens: none !important;
		-webkit-hyphens: none !important;
	}

	.ocx-interview__more-img {
		width: 110px !important;
		height: 118px !important;
		border-radius: 12px !important;
		object-fit: cover !important;
		display: block !important;
		flex-shrink: 0 !important;
	}
}

/* ==========================================================================
   OpenCX Employee Writing Studio / Portal Styles
   ========================================================================== */
.ocx-portal-topbar {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 20px;
	padding-top: var(--Section-Padding-padding-section-medium, 80px);
	padding-bottom: 24px;
	margin-bottom: 28px;
	flex-wrap: wrap;
}

.ocx-portal-author-card {
	display: inline-flex;
	align-items: center;
	gap: 12px;
	background: #FFFFFF;
	border: var(--Stroke-Hairline, 0.5px) solid var(--Color-OpenCX-Dune-Light, #CBBB85);
	border-radius: var(--Radius-Medium, 20px);
	padding: 8px 16px 8px 8px;
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.03);
}

.ocx-portal-author-avatar {
	width: 38px;
	height: 38px;
	border-radius: 50%;
	object-fit: cover;
	border: 0.5px solid var(--Color-OpenCX-Dune-Light, #CBBB85);
}

.ocx-portal-author-info {
	display: flex;
	flex-direction: column;
	line-height: 1.2;
}

.ocx-portal-author-name {
	font-family: var(--wp--preset--font-family--widescreen, 'Widescreen', sans-serif);
	font-size: 14px;
	color: var(--Color-Neutral-Darkest, #000000);
}

.ocx-portal-author-role {
	font-family: var(--wp--preset--font-family--manrope, sans-serif);
	font-size: 12px;
	color: var(--Color-Blackberry-Light, #8F459C);
}

.ocx-portal-logout-link {
	font-family: var(--wp--preset--font-family--manrope, sans-serif);
	font-size: 12px;
	color: var(--Color-Neutral, #7F7F7F);
	margin-left: 10px;
	text-decoration: underline;
	cursor: pointer;
}

.ocx-portal-logout-link:hover {
	color: var(--Color-Neutral-Darkest, #000000);
}

.ocx-portal-layout {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 520px;
	gap: 36px;
	align-items: flex-start;
}

.ocx-portal-form {
	background-color: var(--Color-OpenCX-Dune-Lightest, #F8F6F0);
	border: var(--Stroke-Hairline, 0.5px) solid var(--Color-OpenCX-Dune-Light, #CBBB85);
	border-radius: var(--Radius-Medium, 20px);
	padding: 32px;
	box-sizing: border-box;
}

.ocx-portal-group {
	margin-bottom: 22px;
}

.ocx-portal-row {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 16px;
}

.ocx-portal-label {
	display: block;
	font-family: var(--wp--preset--font-family--widescreen, 'Widescreen', sans-serif);
	font-size: 14px;
	font-weight: 400;
	color: var(--Color-Neutral-Darkest, #000000);
	margin-bottom: 8px;
	letter-spacing: -0.01em;
}

.ocx-portal-label span.ocx-portal-hint {
	font-family: var(--wp--preset--font-family--manrope, sans-serif);
	font-size: 12px;
	color: var(--Color-Neutral, #7F7F7F);
	font-weight: 400;
	margin-left: 6px;
}

.ocx-portal-input,
.ocx-portal-select,
.ocx-portal-textarea {
	width: 100%;
	background-color: #FFFFFF;
	border: var(--Stroke-Hairline, 0.5px) solid var(--Color-OpenCX-Dune-Light, #CBBB85);
	border-radius: var(--Radius-Small, 12px);
	padding: 12px 16px;
	font-family: var(--wp--preset--font-family--manrope, sans-serif);
	font-size: 15px;
	color: var(--Color-Neutral-Darkest, #000000);
	box-sizing: border-box;
	outline: none;
	transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.ocx-portal-input:focus,
.ocx-portal-select:focus,
.ocx-portal-textarea:focus {
	border-color: var(--Color-Blackberry-Light, #8F459C);
	box-shadow: 0 0 0 2px rgba(143, 69, 156, 0.15);
}

.ocx-portal-textarea {
	min-height: 100px;
	resize: vertical;
	line-height: 1.5;
}

/* Dropzone */
.ocx-portal-dropzone {
	border: 1.5px dashed var(--Color-OpenCX-Dune-Light, #CBBB85);
	background: #FFFFFF;
	border-radius: var(--Radius-Small, 12px);
	padding: 24px;
	text-align: center;
	cursor: pointer;
	transition: border-color 0.2s ease, background-color 0.2s ease;
	position: relative;
}

.ocx-portal-dropzone:hover,
.ocx-portal-dropzone.is-dragover {
	border-color: var(--Color-Blackberry-Light, #8F459C);
	background-color: #FAF8F4;
}

.ocx-portal-dropzone-icon {
	margin-bottom: 8px;
	color: var(--Color-OpenCX-Dune, #B69E52);
}

.ocx-portal-dropzone-text {
	font-family: var(--wp--preset--font-family--widescreen, 'Widescreen', sans-serif);
	font-size: 14px;
	color: var(--Color-Neutral-Darkest, #000000);
	margin: 0 0 4px 0;
}

.ocx-portal-dropzone-sub {
	font-family: var(--wp--preset--font-family--manrope, sans-serif);
	font-size: 12px;
	color: var(--Color-Neutral, #7F7F7F);
	margin: 0;
}

.ocx-portal-dropzone-preview-wrap {
	display: none;
	align-items: center;
	gap: 16px;
	text-align: left;
}

.ocx-portal-dropzone-thumb {
	width: 70px;
	height: 75px;
	border-radius: 8px;
	object-fit: cover;
	border: 0.5px solid var(--Color-OpenCX-Dune-Light, #CBBB85);
}

.ocx-portal-dropzone-meta {
	flex: 1 1 auto;
}

.ocx-portal-dropzone-filename {
	font-family: var(--wp--preset--font-family--widescreen, 'Widescreen', sans-serif);
	font-size: 13px;
	color: #000000;
	margin: 0 0 2px 0;
}

.ocx-portal-dropzone-filesize {
	font-family: var(--wp--preset--font-family--manrope, sans-serif);
	font-size: 12px;
	color: var(--Color-Neutral, #7F7F7F);
	margin: 0;
}

.ocx-portal-dropzone-remove {
	background: none;
	border: none;
	color: #C0392B;
	font-size: 12px;
	cursor: pointer;
	text-decoration: underline;
	padding: 0;
	margin-top: 4px;
	font-family: var(--wp--preset--font-family--manrope, sans-serif);
}

/* Rich Text WYSIWYG Editor */
.ocx-rich-editor {
	border: var(--Stroke-Hairline, 0.5px) solid var(--Color-OpenCX-Dune-Light, #CBBB85);
	border-radius: var(--Radius-Small, 12px);
	background: #FFFFFF;
	overflow: hidden;
	transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.ocx-rich-editor:focus-within {
	border-color: var(--Color-Blackberry-Light, #8F459C);
	box-shadow: 0 0 0 2px rgba(143, 69, 156, 0.15);
}

.ocx-rich-toolbar {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 4px;
	padding: 8px 10px;
	background: #FAF8F4;
	border-bottom: 0.5px solid var(--Color-OpenCX-Dune-Light, #CBBB85);
}

.ocx-rich-toolgroup {
	display: flex;
	align-items: center;
	gap: 2px;
	padding-right: 6px;
	margin-right: 6px;
	border-right: 0.5px solid #D8D8D8;
}

.ocx-rich-toolgroup:last-child {
	border-right: none;
	margin-right: 0;
	padding-right: 0;
}

.ocx-rich-btn {
	background: transparent;
	border: 0.5px solid transparent;
	border-radius: 6px;
	padding: 5px 8px;
	min-width: 28px;
	height: 28px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	font-family: var(--wp--preset--font-family--manrope, sans-serif);
	font-size: 13px;
	color: #000000;
	transition: all 0.15s ease;
}

.ocx-rich-btn:hover {
	background: #EDE8D8;
	border-color: #CBBB85;
}

.ocx-rich-btn.is-active {
	background: var(--Color-Voodoo, #4A2B4F);
	color: #FFFFFF;
	border-color: var(--Color-Voodoo, #4A2B4F);
}

.ocx-rich-select {
	background: #FFFFFF;
	border: 0.5px solid var(--Color-OpenCX-Dune-Light, #CBBB85);
	border-radius: 6px;
	padding: 4px 6px;
	font-family: var(--wp--preset--font-family--manrope, sans-serif);
	font-size: 12px;
	color: #000000;
	cursor: pointer;
	height: 28px;
}

.ocx-rich-color-picker {
	width: 26px;
	height: 26px;
	padding: 0;
	border: 0.5px solid var(--Color-OpenCX-Dune-Light, #CBBB85);
	border-radius: 6px;
	cursor: pointer;
	background: transparent;
	vertical-align: middle;
}

.ocx-rich-canvas {
	min-height: 240px;
	max-height: 480px;
	overflow-y: auto;
	padding: 16px 20px;
	font-family: var(--wp--preset--font-family--manrope, sans-serif);
	font-size: 15px;
	line-height: 1.6;
	color: #000000;
	outline: none;
}

.ocx-rich-canvas p {
	margin: 0 0 1em 0;
}

.ocx-rich-canvas h2 {
	font-family: var(--wp--preset--font-family--widescreen, 'Widescreen', sans-serif);
	font-size: 24px;
	margin: 1.2em 0 0.5em 0;
}

.ocx-rich-canvas h3 {
	font-family: var(--wp--preset--font-family--widescreen, 'Widescreen', sans-serif);
	font-size: 20px;
	margin: 1.1em 0 0.4em 0;
}

.ocx-rich-canvas blockquote {
	border-left: 3px solid var(--Color-Blackberry-Light, #8F459C);
	padding-left: 16px;
	margin: 1.2em 0;
	font-style: italic;
	color: #4C4C4C;
}

.ocx-rich-canvas img {
	max-width: 100%;
	border-radius: 8px;
	margin: 12px 0;
	border: 0.5px solid var(--Color-OpenCX-Dune-Light, #CBBB85);
}

.ocx-rich-html-editor {
	display: none;
	width: 100%;
	min-height: 240px;
	padding: 16px;
	font-family: monospace;
	font-size: 13px;
	line-height: 1.5;
	border: none;
	background: #191919;
	color: #2ECC71;
	outline: none;
	box-sizing: border-box;
	resize: vertical;
}

/* Q&A Builder for Client Perspective */
.ocx-qa-list {
	display: flex;
	flex-direction: column;
	gap: 14px;
	margin-bottom: 14px;
}

.ocx-qa-card {
	background: #FFFFFF;
	border: 0.5px solid var(--Color-OpenCX-Dune-Light, #CBBB85);
	border-radius: var(--Radius-Small, 12px);
	padding: 14px;
	position: relative;
}

.ocx-qa-card-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-bottom: 8px;
}

.ocx-qa-item-num {
	font-family: var(--wp--preset--font-family--widescreen, 'Widescreen', sans-serif);
	font-size: 13px;
	color: var(--Color-Blackberry-Light, #8F459C);
}

.ocx-qa-btn-remove {
	background: none;
	border: none;
	color: #C0392B;
	font-size: 12px;
	cursor: pointer;
	font-family: var(--wp--preset--font-family--manrope, sans-serif);
	text-decoration: underline;
	padding: 0;
}

.ocx-qa-btn-add {
	background: #FFFFFF;
	border: 0.5px solid var(--Color-OpenCX-Dune, #B69E52);
	color: var(--Color-OpenCX-Dune-Dark, #917E41);
	font-family: var(--wp--preset--font-family--widescreen, 'Widescreen', sans-serif);
	font-size: 13px;
	padding: 9px 16px;
	border-radius: 8px;
	cursor: pointer;
	display: inline-flex;
	align-items: center;
	gap: 6px;
	transition: background 0.15s ease;
}

.ocx-qa-btn-add:hover {
	background: #FAF8F4;
}

/* Live Preview Column */
.ocx-portal-preview-col {
	position: sticky;
	top: 32px;
	display: flex;
	flex-direction: column;
	gap: 16px;
}

.ocx-portal-preview-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding-bottom: 10px;
	border-bottom: 0.5px solid var(--Color-OpenCX-Dune-Light, #CBBB85);
}

.ocx-portal-preview-badge {
	font-family: var(--wp--preset--font-family--widescreen, 'Widescreen', sans-serif);
	font-size: 13px;
	color: var(--Color-Blackberry-Light, #8F459C);
	text-transform: uppercase;
	letter-spacing: 0.05em;
	display: flex;
	align-items: center;
	gap: 8px;
}

.ocx-portal-preview-badge::before {
	content: '';
	display: inline-block;
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background-color: #2ECC71;
	box-shadow: 0 0 8px #2ECC71;
}

.ocx-portal-preview-col .ocx-res-card {
	cursor: default !important;
	transform: none !important;
	width: 100%;
	min-height: 380px;
	box-sizing: border-box;
}

.ocx-portal-preview-col .ocx-res-card__body {
	width: auto;
	flex: 1 1 auto;
	min-width: 0;
	height: auto;
	min-height: 200px;
}

.ocx-portal-preview-col .ocx-res-card__title {
	font-size: clamp(22px, 2vw, 28px) !important;
	word-break: break-word;
}

.ocx-portal-actions {
	display: flex;
	align-items: center;
	gap: 14px;
	margin-top: 28px;
}

.ocx-portal-btn-primary {
	background-color: var(--Color-OpenCX-Dune, #B69E52);
	color: var(--Color-OpenCX-White, #FCFBF9);
	font-family: var(--wp--preset--font-family--widescreen, 'Widescreen', sans-serif);
	font-size: 15px;
	padding: 14px 28px;
	border-radius: var(--Radius-Small, 12px);
	border: none;
	cursor: pointer;
	transition: background-color 0.2s ease, transform 0.15s ease;
}

.ocx-portal-btn-primary:hover {
	background-color: var(--Color-Husk-Dark, #917E41);
	transform: translateY(-1px);
}

.ocx-portal-btn-secondary {
	background-color: transparent;
	color: var(--Color-Neutral-Darkest, #000000);
	border: var(--Stroke-Hairline, 0.5px) solid var(--Color-OpenCX-Dune-Light, #CBBB85);
	font-family: var(--wp--preset--font-family--widescreen, 'Widescreen', sans-serif);
	font-size: 15px;
	padding: 14px 22px;
	border-radius: var(--Radius-Small, 12px);
	cursor: pointer;
	transition: background-color 0.2s ease;
}

.ocx-portal-btn-secondary:hover {
	background-color: #EDE8D8;
}

.ocx-portal-alert {
	display: none;
	padding: 16px 20px;
	border-radius: var(--Radius-Small, 12px);
	margin-top: 20px;
	font-family: var(--wp--preset--font-family--manrope, sans-serif);
	font-size: 14px;
	line-height: 1.4;
}

.ocx-portal-alert--success {
	display: block;
	background-color: #EBF8F1;
	border: 0.5px solid #2ECC71;
	color: #196F3D;
}

@media (max-width: 1099.98px) {
	.ocx-portal-layout {
		grid-template-columns: 1fr;
	}
	.ocx-portal-preview-col {
		position: static;
		width: 100%;
		margin-top: 24px;
	}
}

@media (max-width: 767.98px) {
	.ocx-portal-row {
		grid-template-columns: 1fr;
	}
}

/* ==========================================================================
   Article & Single Post Typography Standards
   - Párrafos: Widescreen 300 Light
   - Títulos / Headings: Widescreen 400 Regular
   ========================================================================== */
body.single,
body.single-post,
body.single-opencx_news,
body.single-opencx_interview,
.ocx-single-post-page,
.single .ocx-single-post-page {
	font-family: var(--wp--preset--font-family--widescreen, "widescreen", sans-serif) !important;
	font-weight: 300 !important;
}

/* Titles and Headings: Widescreen 400 */
body.single h1,
body.single h2,
body.single h3,
body.single h4,
body.single h5,
body.single h6,
body.single h1 *,
body.single h2 *,
body.single h3 *,
body.single h4 *,
body.single h5 *,
body.single h6 *,
body.single .wp-block-post-title,
body.single .wp-block-post-title *,
body.single .entry-title,
body.single .entry-title *,
.ocx-single-post__title,
.ocx-single-post__title *,
.ocx-single-post__body h1,
.ocx-single-post__body h2,
.ocx-single-post__body h3,
.ocx-single-post__body h4,
.ocx-single-post__body h5,
.ocx-single-post__body h6,
.ocx-single-post__body h1 *,
.ocx-single-post__body h2 *,
.ocx-single-post__body h3 *,
.ocx-single-post__body h4 *,
.ocx-single-post__body h5 *,
.ocx-single-post__body h6 *,
.entry-content h1,
.entry-content h2,
.entry-content h3,
.entry-content h4,
.entry-content h5,
.entry-content h6,
.entry-content h1 *,
.entry-content h2 *,
.entry-content h3 *,
.entry-content h4 *,
.entry-content h5 *,
.entry-content h6 *,
.wp-block-post-content h1,
.wp-block-post-content h2,
.wp-block-post-content h3,
.wp-block-post-content h4,
.wp-block-post-content h5,
.wp-block-post-content h6,
.wp-block-post-content h1 *,
.wp-block-post-content h2 *,
.wp-block-post-content h3 *,
.wp-block-post-content h4 *,
.wp-block-post-content h5 *,
.wp-block-post-content h6 * {
	font-family: var(--wp--preset--font-family--widescreen, "widescreen", sans-serif) !important;
	font-weight: 400 !important;
	color: var(--Color-Neutral-Darkest, #000000);
	letter-spacing: -0.01em;
}

/* Paragraphs, List Items & Body Text: Widescreen 300 Light */
body.single .entry-content p,
body.single .entry-content p *,
body.single .entry-content li,
body.single .entry-content li *,
body.single .wp-block-post-content p,
body.single .wp-block-post-content p *,
body.single .wp-block-post-content li,
body.single .wp-block-post-content li *,
.ocx-single-post__body p,
.ocx-single-post__body p *,
.ocx-single-post__body li,
.ocx-single-post__body li *,
.ocx-single-post__content-container p,
.ocx-single-post__content-container p *,
.ocx-article__content p,
.ocx-article__content p *,
.ocx-article__content li,
.ocx-article__content li * {
	font-family: var(--wp--preset--font-family--widescreen, "widescreen", sans-serif) !important;
	font-weight: 300 !important;
}

/* Bold / Strong emphasis inside paragraphs retains Widescreen 600 Semi-bold */
body.single .entry-content p strong,
body.single .entry-content p b,
body.single .entry-content p strong *,
body.single .entry-content p b *,
body.single .wp-block-post-content p strong,
body.single .wp-block-post-content p b,
body.single .wp-block-post-content p strong *,
body.single .wp-block-post-content p b *,
.ocx-single-post__body p strong,
.ocx-single-post__body p b,
.ocx-single-post__body p strong *,
.ocx-single-post__body p b *,
.ocx-article__content p strong,
.ocx-article__content p b,
.ocx-article__content p strong *,
.ocx-article__content p b * {
	font-family: var(--wp--preset--font-family--widescreen, "widescreen", sans-serif) !important;
	font-weight: 600 !important;
}

/* ==========================================================================
   OpenCX Privacy & Cookie Consent (CMP) System
   Compliant with GDPR, CCPA/CPRA, and LGPD
   ========================================================================== */

/* 1. Cookie Banner (Floating Bottom Bar) */
.ocx-cookie-banner {
	position: fixed;
	bottom: 24px;
	left: 50%;
	transform: translateX(-50%) translateY(40px);
	width: calc(100% - 48px);
	max-width: 1200px;
	z-index: 99999;
	background: rgba(22, 34, 39, 0.96);
	backdrop-filter: blur(16px);
	-webkit-backdrop-filter: blur(16px);
	border: 1px solid #B69E52;
	border-radius: 16px;
	box-shadow: 0 20px 50px rgba(0, 0, 0, 0.5);
	padding: 24px 32px;
	box-sizing: border-box;
	opacity: 0;
	pointer-events: none;
	transition: opacity 0.35s cubic-bezier(0.16, 1, 0.3, 1), transform 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}

.ocx-cookie-banner.is-visible {
	opacity: 1;
	pointer-events: auto;
	transform: translateX(-50%) translateY(0);
}

.ocx-cookie-banner__container {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 36px;
	width: 100%;
}

.ocx-cookie-banner__content {
	flex: 1;
	min-width: 0;
}

.ocx-cookie-banner__header {
	display: flex;
	align-items: center;
	gap: 12px;
	margin-bottom: 8px;
}

.ocx-cookie-banner__icon {
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
}

.ocx-cookie-banner__titles {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 12px;
}

.ocx-cookie-banner__title {
	margin: 0;
	font-family: var(--wp--preset--font-family--widescreen, 'Widescreen', sans-serif);
	font-size: 19px;
	font-weight: 500;
	line-height: 1.3;
	color: #FCFBF9;
}

.ocx-cookie-banner__badge {
	font-family: var(--wp--preset--font-family--inter, 'Inter', sans-serif);
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.5px;
	text-transform: uppercase;
	color: #B69E52;
	background: rgba(182, 158, 82, 0.15);
	border: 1px solid rgba(182, 158, 82, 0.35);
	padding: 2px 8px;
	border-radius: 12px;
}

.ocx-cookie-banner__text {
	margin: 0;
	font-family: var(--wp--preset--font-family--inter, 'Inter', sans-serif);
	font-size: 13.5px;
	line-height: 1.55;
	color: #CBBB85;
}

.ocx-cookie-banner__link {
	color: #FCFBF9;
	text-decoration: underline;
	text-underline-offset: 3px;
	transition: color 0.2s ease;
}

.ocx-cookie-banner__link:hover {
	color: #B69E52;
}

.ocx-cookie-banner__actions {
	display: flex;
	align-items: center;
	gap: 12px;
	flex-shrink: 0;
}

/* Cookie Buttons */
.ocx-cookie-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 10px 18px;
	border-radius: 8px;
	font-family: var(--wp--preset--font-family--inter, 'Inter', sans-serif);
	font-size: 13.5px;
	font-weight: 600;
	cursor: pointer;
	text-decoration: none;
	white-space: nowrap;
	transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease, transform 0.15s ease;
}

.ocx-cookie-btn:active {
	transform: scale(0.98);
}

.ocx-cookie-btn--primary {
	background-color: #B69E52;
	color: #162227;
	border: 1px solid #B69E52;
}

.ocx-cookie-btn--primary:hover {
	background-color: #CBBB85;
	border-color: #CBBB85;
}

.ocx-cookie-btn--secondary {
	background-color: transparent;
	color: #FCFBF9;
	border: 1px solid #B69E52;
}

.ocx-cookie-btn--secondary:hover {
	background-color: rgba(182, 158, 82, 0.15);
	color: #B69E52;
}

.ocx-cookie-btn--accent {
	background-color: #FCFBF9;
	color: #162227;
	border: 1px solid #FCFBF9;
}

.ocx-cookie-btn--accent:hover {
	background-color: #B69E52;
	border-color: #B69E52;
}

.ocx-cookie-btn--ghost {
	background-color: transparent;
	color: #CBBB85;
	border: none;
	text-decoration: underline;
	text-underline-offset: 3px;
	padding: 10px 8px;
}

.ocx-cookie-btn--ghost:hover {
	color: #FCFBF9;
}

/* 2. Preferences Modal */
body.ocx-cookie-modal-open {
	overflow: hidden !important;
}

.ocx-cookie-modal {
	position: fixed;
	inset: 0;
	z-index: 100000;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 24px;
	box-sizing: border-box;
	opacity: 0;
	pointer-events: none;
	transition: opacity 0.25s ease;
}

.ocx-cookie-modal.is-open {
	opacity: 1;
	pointer-events: auto;
}

.ocx-cookie-modal__backdrop {
	position: fixed;
	inset: 0;
	background: rgba(10, 16, 19, 0.82);
	backdrop-filter: blur(10px);
	-webkit-backdrop-filter: blur(10px);
}

.ocx-cookie-modal__card {
	position: relative;
	z-index: 1;
	width: 100%;
	max-width: 680px;
	max-height: calc(100vh - 48px);
	display: flex;
	flex-direction: column;
	background: #162227;
	border: 1px solid #B69E52;
	border-radius: 16px;
	box-shadow: 0 24px 60px rgba(0, 0, 0, 0.65);
	padding: 32px;
	box-sizing: border-box;
	transform: translateY(20px) scale(0.98);
	transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}

.ocx-cookie-modal.is-open .ocx-cookie-modal__card {
	transform: translateY(0) scale(1);
}

.ocx-cookie-modal__header {
	display: flex;
	justify-content: space-between;
	align-items: flex-start;
	gap: 16px;
	margin-bottom: 16px;
	border-bottom: 1px solid rgba(182, 158, 82, 0.2);
	padding-bottom: 16px;
}

.ocx-cookie-modal__title {
	margin: 0 0 6px 0;
	font-family: var(--wp--preset--font-family--widescreen, 'Widescreen', sans-serif);
	font-size: 22px;
	font-weight: 500;
	color: #B69E52;
}

.ocx-cookie-modal__subtitle {
	margin: 0;
	font-family: var(--wp--preset--font-family--inter, 'Inter', sans-serif);
	font-size: 13.5px;
	color: #FCFBF9;
	opacity: 0.85;
}

.ocx-cookie-modal__close {
	background: transparent;
	border: none;
	color: #CBBB85;
	cursor: pointer;
	padding: 4px;
	margin: -4px;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 6px;
	transition: color 0.2s ease, background-color 0.2s ease;
}

.ocx-cookie-modal__close:hover {
	color: #FCFBF9;
	background: rgba(255, 255, 255, 0.08);
}

.ocx-cookie-modal__notice {
	margin-bottom: 18px;
	font-family: var(--wp--preset--font-family--inter, 'Inter', sans-serif);
	font-size: 12.5px;
	line-height: 1.5;
	color: #CBBB85;
}

.ocx-cookie-modal__notice p {
	margin: 0 0 8px 0;
}

.ocx-cookie-modal__gpc {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 8px 12px;
	background: rgba(70, 180, 80, 0.1);
	border: 1px solid rgba(70, 180, 80, 0.3);
	border-radius: 8px;
	color: #81c784;
	font-size: 12px;
	font-weight: 500;
}

.ocx-cookie-modal__categories {
	flex: 1;
	overflow-y: auto;
	margin-bottom: 20px;
	padding-right: 6px;
}

/* Custom scrollbar */
.ocx-cookie-modal__categories::-webkit-scrollbar {
	width: 6px;
}

.ocx-cookie-modal__categories::-webkit-scrollbar-track {
	background: rgba(255, 255, 255, 0.05);
	border-radius: 3px;
}

.ocx-cookie-modal__categories::-webkit-scrollbar-thumb {
	background: rgba(182, 158, 82, 0.4);
	border-radius: 3px;
}

.ocx-cookie-modal__categories::-webkit-scrollbar-thumb:hover {
	background: #B69E52;
}

/* Category item card */
.ocx-cookie-category {
	background: rgba(255, 255, 255, 0.03);
	border: 1px solid rgba(182, 158, 82, 0.2);
	border-radius: 12px;
	padding: 16px 20px;
	margin-bottom: 12px;
	transition: border-color 0.2s ease;
}

.ocx-cookie-category:hover {
	border-color: rgba(182, 158, 82, 0.45);
}

.ocx-cookie-category__header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	margin-bottom: 8px;
}

.ocx-cookie-category__info {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 10px;
}

.ocx-cookie-category__name {
	margin: 0;
	font-family: var(--wp--preset--font-family--widescreen, 'Widescreen', sans-serif);
	font-size: 15px;
	font-weight: 500;
	color: #FCFBF9;
}

.ocx-cookie-category__badge {
	font-family: var(--wp--preset--font-family--inter, 'Inter', sans-serif);
	font-size: 10.5px;
	font-weight: 600;
	color: #CBBB85;
	background: rgba(203, 187, 133, 0.12);
	border-radius: 10px;
	padding: 2px 8px;
}

.ocx-cookie-category__badge--locked {
	color: #81c784;
	background: rgba(70, 180, 80, 0.15);
}

.ocx-cookie-category__desc {
	margin: 0;
	font-family: var(--wp--preset--font-family--inter, 'Inter', sans-serif);
	font-size: 12.5px;
	line-height: 1.55;
	color: #CBBB85;
}

/* Switch Toggle Component */
.ocx-cookie-switch-wrapper {
	position: relative;
	width: 44px;
	height: 24px;
	flex-shrink: 0;
}

.ocx-cookie-switch-input {
	position: absolute;
	opacity: 0;
	width: 0;
	height: 0;
	margin: 0;
}

.ocx-cookie-switch-label {
	position: absolute;
	cursor: pointer;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background-color: #2A3A40;
	border-radius: 24px;
	transition: background-color 0.25s ease;
}

.ocx-cookie-switch-label::before {
	position: absolute;
	content: "";
	height: 18px;
	width: 18px;
	left: 3px;
	bottom: 3px;
	background-color: #FCFBF9;
	border-radius: 50%;
	transition: transform 0.25s ease;
	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
}

.ocx-cookie-switch-input:checked + .ocx-cookie-switch-label {
	background-color: #B69E52;
}

.ocx-cookie-switch-input:checked + .ocx-cookie-switch-label::before {
	transform: translateX(20px);
}

.ocx-cookie-switch-input:focus-visible + .ocx-cookie-switch-label {
	outline: 2px solid #FCFBF9;
	outline-offset: 2px;
}

.ocx-cookie-switch-label--disabled {
	cursor: not-allowed;
	opacity: 0.8;
}

/* Modal Footer */
.ocx-cookie-modal__footer {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	border-top: 1px solid rgba(182, 158, 82, 0.2);
	padding-top: 20px;
	flex-wrap: wrap;
}

.ocx-cookie-modal__links {
	display: flex;
	align-items: center;
	gap: 10px;
	font-family: var(--wp--preset--font-family--inter, 'Inter', sans-serif);
	font-size: 12px;
	color: #CBBB85;
}

.ocx-cookie-modal__links a {
	color: #CBBB85;
	text-decoration: underline;
	text-underline-offset: 2px;
	transition: color 0.2s ease;
}

.ocx-cookie-modal__links a:hover {
	color: #FCFBF9;
}

.ocx-cookie-modal__actions {
	display: flex;
	align-items: center;
	gap: 10px;
	flex-wrap: wrap;
	margin-left: auto;
}

/* Responsive adjustments */
@media (max-width: 991.98px) {
	.ocx-cookie-banner {
		bottom: 16px;
		width: calc(100% - 32px);
		padding: 20px 24px;
	}

	.ocx-cookie-banner__container {
		flex-direction: column;
		align-items: flex-start;
		gap: 20px;
	}

	.ocx-cookie-banner__actions {
		width: 100%;
		justify-content: flex-start;
		flex-wrap: wrap;
	}
}

@media (max-width: 640px) {
	.ocx-cookie-banner {
		bottom: 10px;
		width: calc(100% - 20px);
		padding: 16px;
		border-radius: 12px;
	}

	.ocx-cookie-banner__actions {
		flex-direction: column;
		width: 100%;
		gap: 8px;
	}

	.ocx-cookie-banner__actions .ocx-cookie-btn {
		width: 100%;
	}

	.ocx-cookie-modal {
		padding: 10px;
	}

	.ocx-cookie-modal__card {
		padding: 20px 16px;
		max-height: calc(100vh - 20px);
	}

	.ocx-cookie-modal__actions {
		width: 100%;
		flex-direction: column;
		gap: 8px;
	}

	.ocx-cookie-modal__actions .ocx-cookie-btn {
		width: 100%;
	}

	.ocx-cookie-modal__footer {
		flex-direction: column;
		align-items: flex-start;
		gap: 14px;
	}
}

/* ==========================================================================
   Sign In button: Ocultar (sin eliminar del DOM) en toda la web (Desktop & Mobile)
   ========================================================================== */
.ocx-header__signin,
.ocx-header .ocx-header__signin,
.ocx-header--home .ocx-header__signin,
.ocx-header--ecosystem .ocx-header__signin,
.ocx-btn-mobile--secondary,
.ocx-mobile-nav__actions .ocx-btn-mobile--secondary,
.ocx-header .ocx-btn--secondary,
a[href*="/sign-in/"],
.wp-block-button:has(a[href*="/sign-in/"]) {
	display: none !important;
}

/* ==========================================================================
   Hero Zoho CRM Lead Modal (.ocx-hero-modal)
   ========================================================================== */
body.ocx-modal-open {
	overflow: hidden !important;
}

.ocx-hero-modal {
	position: fixed;
	inset: 0;
	z-index: 999999;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 20px;
	box-sizing: border-box;
	opacity: 0;
	visibility: hidden;
	transition: opacity 0.25s ease, visibility 0.25s ease;
}

.ocx-hero-modal.is-open {
	opacity: 1;
	visibility: visible;
}

.ocx-hero-modal__backdrop {
	position: absolute;
	inset: 0;
	background: rgba(14, 15, 17, 0.65);
	backdrop-filter: blur(8px);
	-webkit-backdrop-filter: blur(8px);
	cursor: pointer;
}

.ocx-hero-modal__card {
	position: relative;
	width: 100%;
	max-width: 680px;
	max-height: calc(100vh - 40px);
	overflow-y: auto;
	background: #FAF8F4;
	border: 0.5px solid var(--Color-OpenCX-Dune-Light, #CBBB85);
	border-radius: 20px;
	padding: 28px 32px 26px 32px;
	box-shadow: 0 24px 60px rgba(0, 0, 0, 0.22);
	box-sizing: border-box;
	transform: translateY(20px) scale(0.98);
	transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1);
	z-index: 1;
}

.ocx-hero-modal.is-open .ocx-hero-modal__card {
	transform: translateY(0) scale(1);
}

.ocx-hero-modal__close {
	position: absolute;
	top: 18px;
	right: 18px;
	width: 34px;
	height: 34px;
	border-radius: 50%;
	background: #FFFFFF;
	border: 0.5px solid var(--Color-OpenCX-Dune-Light, #CBBB85);
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	color: #000000;
	transition: all 0.2s ease;
	z-index: 2;
}

.ocx-hero-modal__close:hover {
	background: #F0EDE4;
	transform: rotate(90deg);
}

.ocx-hero-modal__header {
	margin-bottom: 14px;
	padding-right: 40px;
}

.ocx-hero-modal__tagline {
	display: inline-block;
	font-family: var(--wp--preset--font-family--widescreen, "widescreen", sans-serif);
	font-size: 12px;
	font-weight: 500;
	color: var(--Color-Blackberry-Light, #8F459C);
	letter-spacing: 0.04em;
	text-transform: uppercase;
	margin-bottom: 4px;
}

.ocx-hero-modal__title {
	font-family: var(--wp--preset--font-family--widescreen, "widescreen", sans-serif);
	font-size: clamp(20px, 2.2vw, 26px);
	font-weight: 400;
	line-height: 1.25;
	color: #000000;
	margin: 0 0 6px 0;
}

.ocx-hero-modal__subtitle {
	font-family: var(--wp--preset--font-family--manrope, sans-serif);
	font-size: 13.5px;
	line-height: 1.45;
	color: #555555;
	margin: 0;
}

.ocx-hero-modal__challenge-box {
	background: #FFFFFF;
	border: 0.5px solid var(--Color-OpenCX-Dune-Light, #CBBB85);
	border-radius: 10px;
	padding: 10px 14px;
	margin-bottom: 16px;
}

.ocx-hero-modal__challenge-label {
	display: flex;
	align-items: center;
	gap: 6px;
	font-family: var(--wp--preset--font-family--widescreen, "widescreen", sans-serif);
	font-size: 10.5px;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	color: #7F7F7F;
	margin-bottom: 3px;
}

.ocx-hero-modal__challenge-text {
	font-family: var(--wp--preset--font-family--manrope, sans-serif);
	font-size: 13.5px;
	line-height: 1.4;
	color: #191919;
	margin: 0;
	font-style: italic;
}

.ocx-hero-modal .ocx-c4__row {
	gap: 14px;
}

.ocx-hero-modal .ocx-c4__field {
	margin-bottom: 13px;
}

.ocx-hero-modal .ocx-c4__input,
.ocx-hero-modal .ocx-c4__select {
	background: #FFFFFF;
	border: 0.5px solid var(--Color-OpenCX-Dune-Light, #CBBB85);
	border-radius: 8px;
	padding: 9px 12px;
	font-size: 14px;
}

.ocx-hero-modal .ocx-c4__input:focus,
.ocx-hero-modal .ocx-c4__select:focus {
	outline: none;
	border-color: var(--Color-Blackberry-Light, #8F459C);
	box-shadow: 0 0 0 1px var(--Color-Blackberry-Light, #8F459C);
}

.ocx-hero-modal .ocx-c4__label {
	font-size: 13.5px;
	font-weight: 500;
	margin-bottom: 5px;
}

.ocx-hero-modal .ocx-c4__privacy-wrap {
	margin: 4px 0 14px 0;
}

.ocx-hero-modal .ocx-c4__submit {
	margin-top: 6px;
}

.ocx-hero-modal .ocx-contact-submit-btn {
	width: 100%;
	height: 46px;
	font-size: 15px;
	border-radius: 10px;
}

@media (max-width: 640px) {
	.ocx-hero-modal {
		padding: 12px;
	}
	.ocx-hero-modal__card {
		padding: 24px 18px;
		border-radius: 16px;
	}
	.ocx-hero-modal__title {
		font-size: 20px;
	}
	.ocx-hero-modal .ocx-c4__row {
		flex-direction: column;
		gap: 0;
	}
}

/* ==========================================================================
   Privacy Policy Page (Ecosystem/Solution/Industries Layout & Background)
   ========================================================================== */

.ocx-privacy-hero__section {
	width: 100% !important;
	max-width: 100% !important;
	box-sizing: border-box !important;
	background-color: var(--Color-OpenCX-White, #FCFBF9) !important;
	padding: 0 clamp(24px, 5.5vw, 80px) 80px !important;
	display: flex !important;
	flex-direction: column !important;
	align-items: center !important;
	justify-content: flex-start !important;
}

body:has(.ocx-privacy-hero__section) .ocx-footer,
body:has(.ocx-privacy-hero__section) footer,
.page-privacy-policy .ocx-footer,
.page-id-3 .ocx-footer,
body:has(.ocx-terms-hero__section) .ocx-footer,
body:has(.ocx-terms-hero__section) footer,
.page-terms-of-service .ocx-footer {
	background: var(--Color-OpenCX-White, #FCFBF9) !important;
	background-color: var(--Color-OpenCX-White, #FCFBF9) !important;
}

.ocx-privacy-hero__outer {
	width: 100% !important;
	max-width: 1280px !important;
	margin: 0 auto !important;
	border: var(--Stroke-Hairline, 0.5px) solid var(--Color-OpenCX-Dune-Light, #CBBB85) !important;
	background: var(--Color-OpenCX-Lighter, #B1C9D3) !important;
	border-radius: var(--Radius-Medium, 20px) !important;
	box-sizing: border-box !important;
	display: flex !important;
	flex-direction: column !important;
	align-items: center !important;
	justify-content: flex-start !important;
	position: relative !important;
	overflow: hidden !important;
}

.ocx-privacy-hero__container {
	position: relative !important;
	display: flex !important;
	flex-direction: column !important;
	align-items: center !important;
	justify-content: flex-start !important;
	width: calc(100% + 2px) !important;
	margin: -1px !important;
	border-radius: var(--Radius-Medium, 20px) !important;
	border: var(--Stroke-Hairline, 0.5px) solid var(--Color-OpenCX-Dune-Light, #CBBB85) !important;
	background-color: var(--Color-OpenCX-White, #FCFBF9) !important;
	padding: clamp(36px, 5vw, 64px) clamp(24px, 5vw, 72px) clamp(48px, 6vw, 80px) !important;
	box-sizing: border-box !important;
}

.ocx-privacy-hero__header {
	width: 100%;
	max-width: 960px;
	margin: 0 auto 36px auto;
	text-align: center;
	display: flex;
	flex-direction: column;
	align-items: center;
}

.ocx-privacy-hero__tagline {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	margin-bottom: 12px;
}

.ocx-privacy-hero__bracket {
	opacity: 0.85;
}

.ocx-privacy-hero__tagline-text {
	font-family: var(--wp--preset--font-family--widescreen, "widescreen", sans-serif);
	font-size: 13px;
	font-weight: 500;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--Color-Blackberry-Light, #8F459C);
}

.ocx-privacy-hero__heading {
	font-family: var(--wp--preset--font-family--widescreen, "widescreen", sans-serif);
	font-size: clamp(32px, 4.5vw, 55px);
	font-weight: 400;
	line-height: 1.15;
	color: #000000;
	margin: 0 0 12px 0;
	letter-spacing: -0.01em;
}

.ocx-privacy-hero__heading-gold {
	color: var(--Color-Gold, #B69E52);
}

.ocx-privacy-hero__meta {
	font-family: var(--wp--preset--font-family--manrope, sans-serif);
	font-size: 14.5px;
	line-height: 1.5;
	color: #666666;
	margin: 0 0 24px 0;
}

.ocx-privacy-nav {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 8px;
	margin-top: 8px;
	padding-bottom: 24px;
	border-bottom: 0.5px solid var(--Color-OpenCX-Dune-Light, #CBBB85);
	width: 100%;
}

.ocx-privacy-nav__pill {
	display: inline-block;
	background: #FFFFFF;
	border: 0.5px solid var(--Color-OpenCX-Dune-Light, #CBBB85);
	border-radius: 100px;
	padding: 6px 14px;
	font-family: var(--wp--preset--font-family--manrope, sans-serif);
	font-size: 12.5px;
	font-weight: 500;
	color: #222222;
	text-decoration: none;
	transition: all 0.2s ease;
}

.ocx-privacy-nav__pill:hover {
	background: var(--Color-Gold, #B69E52);
	color: #FFFFFF;
	border-color: var(--Color-Gold, #B69E52);
	transform: translateY(-1px);
}

/* Legal Content Typography & Layout */
.ocx-legal__content {
	width: 100%;
	max-width: 920px;
	margin: 0 auto;
	box-sizing: border-box;
}

.ocx-legal__intro-box {
	background: #FFFFFF;
	border: 0.5px solid var(--Color-OpenCX-Dune-Light, #CBBB85);
	border-radius: 14px;
	padding: 24px 28px;
	margin-bottom: 32px;
	box-shadow: 0 4px 20px rgba(0, 0, 0, 0.03);
}

.ocx-legal__intro-box p:last-child {
	margin-bottom: 0;
}

.ocx-legal__content p {
	font-family: var(--wp--preset--font-family--manrope, sans-serif);
	font-size: 15.5px;
	line-height: 1.7;
	color: #282828;
	margin: 0 0 16px 0;
}

.ocx-legal__h2 {
	font-family: var(--wp--preset--font-family--widescreen, "widescreen", sans-serif);
	font-size: clamp(20px, 2.2vw, 25px);
	font-weight: 400;
	line-height: 1.3;
	color: #0E0F11;
	margin: 36px 0 14px 0;
	padding-top: 24px;
	border-top: 0.5px solid rgba(203, 187, 133, 0.35);
	scroll-margin-top: 120px;
}

.ocx-legal__h3 {
	font-family: var(--wp--preset--font-family--widescreen, "widescreen", sans-serif);
	font-size: 17px;
	font-weight: 500;
	line-height: 1.35;
	color: #191919;
	margin: 20px 0 10px 0;
	scroll-margin-top: 120px;
}

.ocx-legal__content ul {
	margin: 0 0 20px 0;
	padding-left: 24px;
}

.ocx-legal__content li {
	font-family: var(--wp--preset--font-family--manrope, sans-serif);
	font-size: 15px;
	line-height: 1.65;
	color: #2E2E2E;
	margin-bottom: 10px;
}

.ocx-legal__content li strong {
	color: #0E0F11;
}

.ocx-legal__content a {
	color: var(--Color-Blackberry-Light, #8F459C);
	text-decoration: underline;
	text-underline-offset: 3px;
	transition: color 0.15s ease;
}

.ocx-legal__content a:hover {
	color: var(--Color-Gold, #B69E52);
}

.ocx-legal__contact-card {
	background: #FFFFFF;
	border: 0.5px solid var(--Color-OpenCX-Dune-Light, #CBBB85);
	border-radius: 14px;
	padding: 24px 28px;
	margin-top: 20px;
	box-shadow: 0 4px 20px rgba(0, 0, 0, 0.03);
}

.ocx-legal__contact-list {
	list-style: none !important;
	padding-left: 0 !important;
	margin: 16px 0 0 0 !important;
	display: flex;
	flex-direction: column;
	gap: 12px;
}

.ocx-legal__contact-item {
	display: flex;
	align-items: center;
	gap: 10px;
	font-family: var(--wp--preset--font-family--manrope, sans-serif);
	font-size: 15px;
	color: #191919;
	margin: 0 !important;
}

.ocx-legal__contact-icon {
	color: var(--Color-Gold, #B69E52);
	font-weight: 600;
}

@media (max-width: 768px) {
	.ocx-privacy-hero__section {
		padding: 0 16px 60px !important;
	}
	.ocx-privacy-hero__container {
		padding: 28px 18px 40px !important;
		border-radius: 16px !important;
	}
	.ocx-privacy-hero__outer {
		border-radius: 16px !important;
	}
	.ocx-legal__content p,
	.ocx-legal__content li {
		font-size: 14.5px;
	}
	.ocx-privacy-nav {
		justify-content: flex-start;
		overflow-x: auto;
		flex-wrap: nowrap;
		padding-bottom: 16px;
		-webkit-overflow-scrolling: touch;
	}
	.ocx-privacy-nav__pill {
		white-space: nowrap;
		flex-shrink: 0;
	}
}