/**
 * Solutions pages (Figma 253:13 overview, 253:14–17 solution pages). Built by build/cine/solutions.php.
 * Mock-ups sit on fixed-size "stages" (Figma px); smaller screens zoom them.
 */

/* ================================================================== Shared bits */

.cx-site .cx-sol-cap { display: block; font: 600 12px/1.2 var(--cx-body); letter-spacing: 0.08em; text-transform: uppercase; color: var(--cx-mist); }
.cx-site .cx-sol-cap--amber { color: var(--cx-amber); }
.cx-site .cx-sol-tag {
	display: inline-flex;
	align-items: center;
	width: fit-content;
	padding: 7px 12px;
	border-radius: 999px;
	font: 600 13px/1.2 var(--cx-body);
	white-space: nowrap;
	box-sizing: border-box;
}
.cx-site .cx-sol-tag--neutral { background: rgba(255, 255, 255, 0.06); border: 1px solid rgba(255, 255, 255, 0.14); color: var(--cx-cloud); }
.cx-site .cx-sol-tag--outline { background: rgba(255, 255, 255, 0.06); border: 1px solid rgba(245, 158, 11, 0.5); color: var(--cx-amber); }
.cx-site .cx-sol-tag--done { background: rgba(255, 255, 255, 0.06); border: 1px solid rgba(255, 255, 255, 0.14); color: var(--cx-amber); }
.cx-site .cx-sol-tag--solid { background: var(--cx-amber); color: var(--cx-night); box-shadow: 0 0 20px rgba(245, 158, 11, 0.4); }
.cx-site .cx-sol-tag--lg { padding: 9px 16px; }
.cx-site .cx-sol-tags { display: flex; flex-wrap: wrap; gap: 11px 8px; }
.cx-site .cx-sol-panel {
	box-sizing: border-box;
	padding: 24px;
	border-radius: 28px;
	background: rgba(255, 255, 255, 0.05);
	border: 1.5px solid rgba(255, 255, 255, 0.1);
	-webkit-backdrop-filter: blur(12px);
	backdrop-filter: blur(12px);
}
.cx-site .cx-sol-panel--amber { border-color: rgba(245, 158, 11, 0.35); }
.cx-site .cx-sol-bigbtn {
	display: grid;
	place-items: center;
	height: 60px;
	border-radius: 16px;
	background: var(--cx-amber);
	font: 600 17px/1.2 var(--cx-body);
	color: var(--cx-night);
}

/* Orbit rings on these pages: thinner, as drawn (2px at ~50%). */
.cx-site .cx-sol-hero--ott .cx-orbit,
.cx-site .cx-sol-one__orbit,
.cx-site .cx-sol-devs__orbit { border-width: 2px; opacity: 0.55; box-shadow: 0 0 15px rgba(245, 158, 11, 0.85), inset 0 0 12px rgba(245, 158, 11, 0.35); }
.cx-site .cx-sol-xhero .cx-word,
.cx-site .cx-sol-hero .cx-word { color: rgba(255, 255, 255, 0.05); }

/* Fixed-size stages, centred (overflowing evenly when wider than the column). */
.cx-site .cx-sol-stagewrap { display: flex; justify-content: center; }
.cx-site .cx-sol-stage { position: relative; flex: none; }
.cx-site .cx-sol-stage > * { position: absolute; }

/* ================================================================== Hero copy (all pages) */

.cx-site .cx-sol-hero__copy { display: flex; flex-direction: column; align-items: flex-start; min-width: 0; }
.cx-site .cx-sol-hero__copy.cx-head--center { align-items: center; }
.cx-site .cx-sol-hero__copy > .cx-pill + .cx-title { margin-top: 24px; }
.cx-site .cx-sol-hero__copy > .cx-title--h1 { line-height: 1; letter-spacing: -0.025em; }
.cx-site .cx-sol-hero__copy > .cx-title + .cx-lead { margin-top: 20px; }
.cx-site .cx-sol-hero__copy > .cx-btns { margin-top: 36px; }
.cx-site .cx-sol-hero__grid { display: grid; grid-template-columns: 560px minmax(0, 1fr); }

/* ================================================================== /solutions/ overview */

.cx-site .cx-sol-xhero { padding-top: 190px; margin-bottom: 98px; }
.cx-site .cx-sol-xhero .cx-head { max-width: 1000px; }
.cx-site .cx-sol-xhero .cx-title--h1 { font-size: 80px; }
.cx-site .cx-sol-xhero .cx-lead { max-width: 1000px; }

/* Bento tiles */
.cx-site .cx-sol-tiles { margin-bottom: 186px; }
.cx-site .cx-sol-bento {
	display: grid;
	grid-template-columns: 476fr 200fr 476fr;
	grid-template-rows: 420px 340px;
	gap: 24px;
}
.cx-site .cx-sol-tile--micro { grid-column: 1 / 3; }
.cx-site .cx-sol-tile--ott { grid-column: 3; }
.cx-site .cx-sol-tile--fast { grid-column: 1; }
.cx-site .cx-sol-tile--ai { grid-column: 2 / 4; }
.cx-site .cx-sol-tile {
	position: relative;
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	align-items: flex-start;
	padding: 0 36px 42px;
	box-sizing: border-box;
	overflow: hidden;
	border-radius: 32px;
	background: rgba(255, 255, 255, 0.05);
	border: 1.5px solid rgba(255, 255, 255, 0.1);
	box-shadow: 0 30px 60px rgba(0, 0, 5, 0.45);
	isolation: isolate;
	transition: transform var(--cx-fast) var(--cx-ease), border-color var(--cx-fast) var(--cx-ease), box-shadow var(--cx-fast) var(--cx-ease);
}
.cx-site .cx-sol-tile.is-featured { border-color: rgba(245, 158, 11, 0.7); }
.cx-site .cx-sol-tile:hover,
.cx-site .cx-sol-tile:focus-within { transform: translateY(-4px); border-color: rgba(245, 158, 11, 0.9); box-shadow: 0 30px 60px rgba(0, 0, 5, 0.45), 0 0 30px rgba(245, 158, 11, 0.22); }
.cx-site .cx-sol-tile__media { position: absolute; inset: 0; z-index: -1; }
.cx-site .cx-sol-tile__media > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 600ms var(--cx-ease); }
.cx-site .cx-sol-tile:hover .cx-sol-tile__media > img { transform: scale(1.03); }
.cx-site .cx-sol-tile__shade {
	position: absolute;
	inset: 0;
	background:
		linear-gradient(to bottom, rgba(10, 23, 48, 0) 30%, rgba(10, 23, 48, 0.9)),
		linear-gradient(to right, rgba(10, 23, 48, 0.95), rgba(10, 23, 48, 0.1));
}
.cx-site .cx-sol-tile__glyph {
	position: absolute;
	z-index: 2;
	top: 24px;
	right: 24px;
	width: 72px;
	height: 40px;
	display: grid;
	place-items: center;
	box-sizing: border-box;
	border-radius: 12px;
	background: rgba(10, 23, 48, 0.5);
	border: 1px solid rgba(255, 255, 255, 0.2);
	-webkit-backdrop-filter: blur(6px);
	backdrop-filter: blur(6px);
	font: 600 15px/1 var(--cx-head);
	color: var(--cx-amber);
}
.cx-site .cx-sol-tile__glow { position: absolute; left: 450px; top: 50px; width: 260px; height: 320px; border-radius: 50%; background: radial-gradient(closest-side, rgba(245, 158, 11, 0.25), transparent); margin: -45px; padding: 45px; box-sizing: content-box; /* soft glow without a blur filter (cheaper to paint) */ }
.cx-site .cx-sol-tile__phone { position: absolute; left: 488px; top: 40px; }
.cx-site .cx-sol-tile__title { margin: 18px 0 0; font: 600 40px/1.02 var(--cx-head); letter-spacing: -0.025em; color: var(--cx-white); }
.cx-site .cx-sol-tile__text { margin: 12px 0 0; max-width: 360px; font: 400 16px/1.5 var(--cx-body); color: var(--cx-cloud); }
.cx-site .cx-sol-tile__more { margin: 18px 0 0; }
.cx-site .cx-sol-tile__link { font: 600 16px/1.3 var(--cx-body); color: var(--cx-amber); text-decoration: none; }
.cx-site .cx-sol-tile__link::after { content: "  →"; white-space: pre; }
.cx-site .cx-sol-tile__link::before { content: ""; position: absolute; inset: 0; z-index: 3; border-radius: inherit; } /* whole tile clickable */
.cx-site .cx-sol-tile__link:focus-visible { outline: 0; }
.cx-site .cx-sol-tile:has(.cx-sol-tile__link:focus-visible) { outline: 2px solid var(--cx-amber); outline-offset: 3px; }

/* Compare table */
.cx-site .cx-sol-compare { margin-bottom: 210px; }
.cx-site .cx-sol-compare .cx-lead { max-width: 700px; }
.cx-site .cx-sol-compare .cx-title + .cx-lead { margin-top: 20px; }
.cx-site .cx-sol-cmp {
	position: relative;
	width: 1200px;
	padding: 12px 3px 12px 24px;
	box-sizing: border-box;
	border-radius: 32px;
	background: rgba(255, 255, 255, 0.05);
	border: 1.5px solid rgba(255, 255, 255, 0.1);
	-webkit-backdrop-filter: blur(12px);
	backdrop-filter: blur(12px);
}
.cx-site .cx-sol-cmp__hl { position: absolute; left: 222px; top: 12px; bottom: 12px; width: 234px; box-sizing: border-box; border-radius: 24px; background: rgba(245, 158, 11, 0.06); border: 1px solid rgba(245, 158, 11, 0.35); }
.cx-site .cx-sol-cmp__row { position: relative; display: grid; grid-template-columns: 186px repeat(4, 234px); column-gap: 12px; height: 92px; }
.cx-site .cx-sol-cmp__row--head { height: 116px; }
.cx-site .cx-sol-cmp__row:not(.cx-sol-cmp__row--head)::before { content: ""; position: absolute; left: 0; right: 18px; top: 0; height: 1px; background: var(--cx-line); }
.cx-site .cx-sol-cmp__colhead a { position: relative; display: flex; flex-direction: column; height: 100%; padding: 10px 20px 0; box-sizing: border-box; border-radius: 24px 24px 0 0; text-decoration: none; }
.cx-site .cx-sol-cmp__kicker { font: 600 12px/1.2 var(--cx-body); letter-spacing: 0.08em; color: var(--cx-amber); }
.cx-site .cx-sol-cmp__title { margin-top: 8px; font: 600 23px/1.02 var(--cx-head); letter-spacing: -0.025em; color: var(--cx-white); }
.cx-site .cx-sol-cmp__more { margin-top: 10px; font: 600 14px/1.3 var(--cx-body); color: var(--cx-mist); transition: color var(--cx-fast) ease; }
.cx-site .cx-sol-cmp__more::after { content: "  →"; white-space: pre; }
.cx-site .cx-sol-cmp__colhead a:hover .cx-sol-cmp__more { color: var(--cx-amber); }
.cx-site .cx-sol-cmp__label { padding: 24px 0 0 8px; font: 600 12px/1.3 var(--cx-body); letter-spacing: 0.08em; text-transform: uppercase; color: var(--cx-mist); }
.cx-site .cx-sol-cmp__cell { padding: 21px 20px 0; font: 500 15px/1.45 var(--cx-body); color: var(--cx-cloud); }

/* One platform */
.cx-site .cx-sol-one { margin-bottom: 167px; }
.cx-site .cx-sol-split { align-items: start; }
.cx-site .cx-sol-one .cx-split__col--a > .cx-title + .cx-lead { margin-top: 20px; }
.cx-site .cx-sol-one .cx-lead + .cx-checks { margin-top: 29px; }
.cx-site .cx-sol-one .cx-checks + .cx-btns { margin-top: 44px; }
.cx-site .cx-sol-one__vis { position: relative; height: 420px; margin-left: -20px; }
.cx-site .cx-sol-one__vis .cx-dash { position: absolute; left: 20px; top: 20px; }
.cx-site .cx-sol-one__orbit { left: 0; top: 310px; width: 600px; height: 100px; box-sizing: border-box; }
.cx-site .cx-sol-chipcard {
	position: absolute;
	left: 350px;
	top: 260px;
	width: 250px;
	height: 118px;
	padding: 16px 18px;
	box-sizing: border-box;
	border-radius: 22px;
	background: rgba(10, 23, 48, 0.55);
	border: 1.5px solid rgba(245, 158, 11, 0.4);
	-webkit-backdrop-filter: blur(12px);
	backdrop-filter: blur(12px);
	display: flex;
	flex-direction: column;
	gap: 6px;
}
.cx-site .cx-sol-chipcard .cx-sol-cap { font-size: 11px; margin-bottom: 6px; }
.cx-site .cx-sol-chipcard__row { display: flex; gap: 6px; }
.cx-site .cx-sol-chipcard .cx-sol-tag { padding: 5px 10px; font-size: 12px; }

/* ================================================================== Solution page template */

.cx-site .cx-sol-hero .cx-title--h1 { font-size: 72px; }
.cx-site .cx-sol-opp { margin-bottom: 90px; }
.cx-site .cx-sol-stats { margin-bottom: 170px; }
.cx-site .cx-sol-feat { margin-bottom: 170px; }
.cx-site .cx-sol-how { margin-bottom: 190px; }
.cx-site .cx-sol-money { margin-bottom: 170px; }
.cx-site .cx-sol-dev { margin-bottom: 168px; }
.cx-site .cx-sol-faq { margin-bottom: 180px; }

/* Opportunity / monetization splits: copy starts 20px below the visual's top. */
.cx-site .cx-sol-opp .cx-split__col--a,
.cx-site .cx-sol-money .cx-split__col--b { padding-top: 20px; }
.cx-site .cx-sol-opp .cx-split__col--a > .cx-title + .cx-lead,
.cx-site .cx-sol-money .cx-split__col--b > .cx-title + .cx-lead { margin-top: 20px; }
.cx-site .cx-sol-opp .cx-lead + .cx-checks { margin-top: 29px; }
.cx-site .cx-sol-money .cx-lead + .cx-btns { margin-top: 32px; }

/* Stats, features, FAQ spacing as drawn */
.cx-site .cx-sol-stats .cx-stats { padding: 30px 0 30px; min-height: 190px; box-sizing: border-box; }
.cx-site .cx-sol-stats .cx-stat__num { font-size: 52px; }
.cx-site .cx-sol-stats .cx-stat__text { margin-top: 13px; }
.cx-site .cx-sol-feat .cx-head + *,
.cx-site .cx-sol-faq .cx-head + * { margin-top: 56px; }
.cx-site .cx-sol-faq .cx-faq { gap: 14px; }
.cx-site .cx-sol-dev .cx-title + .cx-lead { margin-top: 20px; }
.cx-site .cx-sol-dev .cx-lead { max-width: 640px; }
.cx-site .cx-sol-dev .cx-head + * { margin-top: 80px; }

/* Glass monetization panel with switches */
.cx-site .cx-sol-models {
	padding: 0 32px 24px;
	border-radius: 32px;
	background: rgba(255, 255, 255, 0.05);
	border: 1.5px solid rgba(245, 158, 11, 0.35);
	-webkit-backdrop-filter: blur(12px);
	backdrop-filter: blur(12px);
}
.cx-site .cx-sol-models__head { display: flex; justify-content: space-between; align-items: center; height: 80px; }
.cx-site .cx-sol-models__head .cx-sol-tag { padding: 6px 12px; font-size: 12px; }
.cx-site .cx-sol-models__list { margin: 0; padding: 0; list-style: none; }
.cx-site .cx-sol-models__list li {
	display: flex;
	justify-content: space-between;
	align-items: center;
	height: 62px;
	margin: 0;
	border-top: 1px solid rgba(255, 255, 255, 0.08);
	font: 500 17px/1.3 var(--cx-body);
	color: var(--cx-cloud);
}
.cx-site .cx-sol-sw { position: relative; flex: none; width: 48px; height: 28px; border-radius: 14px; background: rgba(255, 255, 255, 0.14); }
.cx-site .cx-sol-sw::before { content: ""; position: absolute; left: 3px; top: 3px; width: 22px; height: 22px; border-radius: 50%; background: var(--cx-mist); transition: left var(--cx-fast) var(--cx-ease); }
.cx-site .cx-sol-sw.is-on { background: var(--cx-amber); }
.cx-site .cx-sol-sw.is-on::before { left: 23px; background: var(--cx-night); }

/* Apps & devices: TV + phones stage (1440 × 587) and pills */
.cx-site .cx-sol-devs { position: relative; flex: none; width: 1440px; height: 587px; }
.cx-site .cx-sol-devs > * { position: absolute; }
.cx-site .cx-sol-devs__tv { left: 310px; top: 0; }
.cx-site .cx-sol-devs__left { left: 128px; top: 180px; z-index: 2; }
.cx-site .cx-sol-devs__right { left: 1082px; top: 148px; z-index: 2; }
.cx-site .cx-sol-devs__orbit { left: 220px; top: 410px; width: 1000px; height: 120px; box-sizing: border-box; }
.cx-site .cx-sol-pills { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin-top: 43px; }
.cx-site .cx-sol-pill {
	padding: 9px 16px;
	border-radius: 999px;
	background: rgba(255, 255, 255, 0.06);
	border: 1px solid rgba(255, 255, 255, 0.14);
	-webkit-backdrop-filter: blur(6px);
	backdrop-filter: blur(6px);
	font: 600 14px/1.3 var(--cx-body);
	color: var(--cx-cloud);
	text-decoration: none;
	white-space: nowrap;
	transition: border-color var(--cx-fast) ease, color var(--cx-fast) ease, background var(--cx-fast) ease;
}
.cx-site .cx-sol-pill:hover { border-color: var(--cx-amber); color: var(--cx-white); }
.cx-site .cx-sol-pill.is-on { background: var(--cx-amber); border-color: var(--cx-amber); color: var(--cx-night); box-shadow: 0 0 20px rgba(245, 158, 11, 0.4); }
.cx-site .cx-sol-dev .cx-caption { margin-top: 27px; }

/* Photo + overlay card (OTT, FAST "opportunity") */
.cx-site .cx-sol-oppvis--photo { position: relative; height: 520px; }
.cx-site .cx-sol-oppvis--fast { height: 500px; }
.cx-site .cx-sol-oppphoto { position: absolute; inset: 0; }
.cx-site .cx-sol-oppphoto::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 312px; background: linear-gradient(to bottom, rgba(10, 23, 48, 0), rgba(10, 23, 48, 0.9)); }
.cx-site .cx-sol-oppvis--fast .cx-sol-oppphoto::after { height: 300px; }
.cx-site .cx-sol-overcard { position: absolute; z-index: 1; left: 28px; right: 28px; bottom: 24px; height: 160px; border-radius: 24px; display: flex; flex-direction: column; }
.cx-site .cx-sol-oppvis--fast .cx-sol-overcard { height: 156px; }
.cx-site .cx-sol-overcard__title { margin-top: 10px; font: 600 26px/1.02 var(--cx-head); letter-spacing: -0.025em; color: var(--cx-white); }
.cx-site .cx-sol-overcard .cx-sol-tags { margin-top: auto; }
.cx-site .cx-sol-adbar { display: flex; gap: 6px; margin-top: auto; }
.cx-site .cx-sol-adbar > span { flex: none; display: flex; flex-direction: column; gap: 10px; font: 500 12px/1 var(--cx-body); color: var(--cx-mist); }
.cx-site .cx-sol-adbar i { display: block; height: 8px; border-radius: 4px; background: rgba(255, 255, 255, 0.3); }
.cx-site .cx-sol-adbar .is-ad { color: var(--cx-amber); }
.cx-site .cx-sol-adbar .is-ad i { background: var(--cx-amber); }

/* ================================================================== Entertainment OTT hero */

.cx-site .cx-sol-hero--ott { padding-top: 190px; margin-bottom: 244px; }
.cx-site .cx-sol-hero--ott .cx-sol-hero__copy { max-width: 1060px; }
.cx-site .cx-sol-hero--ott .cx-lead { max-width: 1060px; }
.cx-site .cx-sol-hero--ott .cx-sol-stagewrap { margin-top: 85px; }
.cx-site .cx-sol-stage--ott { width: 1440px; height: 616px; }
.cx-site .cx-sol-ott__live { padding: 7px 16px; font-size: 12px; z-index: 2; }
.cx-site .cx-sol-ott__drm { width: 300px; height: 196px; z-index: 2; }
.cx-site .cx-sol-ott__drm .cx-sol-tags { margin-top: 16px; }
.cx-site .cx-sol-ott__prof { width: 340px; height: 176px; z-index: 2; }
.cx-site .cx-sol-profs { display: flex; gap: 18px; margin-top: 16px; }
.cx-site .cx-sol-prof { display: flex; flex-direction: column; align-items: center; gap: 12px; width: 58px; }
.cx-site .cx-sol-prof__pic {
	width: 58px;
	height: 58px;
	display: grid;
	place-items: center;
	overflow: hidden;
	box-sizing: border-box;
	border-radius: 50%;
	background: var(--cx-navy-600);
	font: 600 22px/1 var(--cx-head);
	color: var(--cx-amber);
}
.cx-site .cx-sol-prof__pic img { width: 100%; height: 100%; object-fit: cover; }
.cx-site .cx-sol-prof.is-on .cx-sol-prof__pic { border: 3px solid var(--cx-amber); }
.cx-site .cx-sol-prof.is-kids .cx-sol-prof__pic { background: rgba(245, 158, 11, 0.2); border: 1px solid rgba(245, 158, 11, 0.5); }
.cx-site .cx-sol-prof__name { font: 500 13px/1 var(--cx-body); color: var(--cx-mist); }
.cx-site .cx-sol-prof.is-on .cx-sol-prof__name { color: var(--cx-white); }

/* ================================================================== Micro-drama hero + wallet */

.cx-site .cx-sol-hero--micro { padding-top: 180px; margin-bottom: 200px; }
.cx-site .cx-sol-hero--micro .cx-sol-hero__copy { padding-top: 40px; }
.cx-site .cx-sol-hero--micro .cx-title--h1 { font-size: 66px; }
.cx-site .cx-sol-stage--micro { width: 742px; height: 710px; }
.cx-site .cx-sol-micro__poster { position: absolute; }
.cx-site .cx-sol-micro__phone--main { z-index: 2; }
.cx-site .cx-sol-micro__coins { z-index: 3; }
.cx-site .cx-sol-micro__swipe {
	z-index: 3;
	font-size: 14px;
	background: rgba(255, 255, 255, 0.06);
	border: 1px solid rgba(255, 255, 255, 0.14);
	-webkit-backdrop-filter: blur(6px);
	backdrop-filter: blur(6px);
	color: var(--cx-cloud);
}

.cx-site .cx-sol-wallet { display: flex; flex-direction: column; height: 580px; padding: 32px; border-radius: 32px; }
.cx-site .cx-sol-wallet__bal { display: flex; align-items: center; gap: 12px; margin-top: 22px; }
.cx-site .cx-sol-wallet__bal .cx-sol-tag { margin-left: auto; padding: 9px 16px; }
.cx-site .cx-sol-wallet__num { font: 600 44px/1.02 var(--cx-head); letter-spacing: -0.025em; color: var(--cx-white); }
.cx-site .cx-sol-coin {
	flex: none;
	width: 44px;
	height: 44px;
	display: grid;
	place-items: center;
	border-radius: 50%;
	background: var(--cx-amber);
	box-shadow: inset 0 0 0 2px var(--cx-amber-100), 0 0 8px rgba(245, 158, 11, 0.6);
	font: 600 24px/1 var(--cx-head);
	color: var(--cx-night);
}
.cx-site .cx-sol-coin--sm { width: 28px; height: 28px; font-size: 15px; box-shadow: inset 0 0 0 1.5px var(--cx-amber-100); }
.cx-site .cx-sol-coin.is-star { background: var(--cx-cream); box-shadow: none; font: 600 14px/1 var(--cx-body); }
.cx-site .cx-sol-wallet__packs { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-top: 36px; }
.cx-site .cx-sol-pack {
	position: relative;
	display: flex;
	flex-direction: column;
	height: 146px;
	padding: 22px;
	box-sizing: border-box;
	border-radius: 20px;
	background: rgba(255, 255, 255, 0.05);
	border: 1px solid rgba(255, 255, 255, 0.1);
}
.cx-site .cx-sol-pack.is-best { background: rgba(245, 158, 11, 0.1); border: 1.5px solid rgba(245, 158, 11, 0.7); }
.cx-site .cx-sol-pack .cx-sol-tag { position: absolute; top: 12px; right: 12px; padding: 4px 10px; font-size: 11px; }
.cx-site .cx-sol-pack__top { display: flex; align-items: center; gap: 12px; }
.cx-site .cx-sol-pack__num { font: 600 30px/1.02 var(--cx-head); letter-spacing: -0.025em; color: var(--cx-white); }
.cx-site .cx-sol-pack__l1 { margin-top: 21px; font: 500 14px/1.3 var(--cx-body); color: var(--cx-cloud); }
.cx-site .cx-sol-pack__l2 { margin-top: 8px; font: 600 13px/1.3 var(--cx-body); color: var(--cx-mist); }
.cx-site .cx-sol-pack__l2.cx-amber { color: var(--cx-amber); }
.cx-site .cx-sol-wallet .cx-sol-bigbtn { margin-top: auto; }

/* ================================================================== FAST hero, channel tiles, guide */

.cx-site .cx-sol-hero--fast { padding-top: 200px; margin-bottom: 84px; }
.cx-site .cx-sol-hero--fast .cx-sol-hero__grid { grid-template-columns: 720px minmax(0, 1fr); }
.cx-site .cx-sol-chans { display: grid; grid-template-columns: repeat(2, 192px); grid-auto-rows: 134px; gap: 16px; justify-content: end; padding-top: 10px; }
.cx-site .cx-sol-chan {
	position: relative;
	overflow: hidden;
	border-radius: 20px;
	background: var(--cx-navy-900);
	border: 1.5px solid rgba(255, 255, 255, 0.1);
	box-shadow: 0 20px 40px rgba(0, 0, 5, 0.4);
}
.cx-site .cx-sol-chan.is-on { border-color: rgba(245, 158, 11, 0.8); }
.cx-site .cx-sol-chan.is-lit { border-color: rgba(255, 255, 255, 0.14); }
.cx-site .cx-sol-chan > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.cx-site .cx-sol-chan::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 104px; background: linear-gradient(to bottom, rgba(10, 23, 48, 0), rgba(10, 23, 48, 0.95)); }
.cx-site .cx-sol-chan .cx-sol-tag { position: absolute; z-index: 1; left: 12px; top: 12px; padding: 4px 9px; font-size: 10px; letter-spacing: 0.06em; }
.cx-site .cx-sol-chan__num { position: absolute; z-index: 1; left: 13px; top: 82px; font: 600 11px/1.2 var(--cx-body); letter-spacing: 0.06em; color: var(--cx-amber); }
.cx-site .cx-sol-chan__name { position: absolute; z-index: 1; left: 13px; top: 99px; font: 600 16px/1.2 var(--cx-head); color: var(--cx-white); white-space: nowrap; }

.cx-site .cx-sol-epg { margin-bottom: 194px; }
.cx-site .cx-sol-guide {
	position: relative;
	width: 1200px;
	height: 566px;
	box-sizing: border-box;
	border-radius: 32px;
	background: rgba(255, 255, 255, 0.05);
	border: 1.5px solid rgba(255, 255, 255, 0.14);
	-webkit-backdrop-filter: blur(12px);
	backdrop-filter: blur(12px);
	font-family: var(--cx-body);
}
.cx-site .cx-sol-guide > * { position: absolute; }
.cx-site .cx-sol-guide__cap { left: 28px; top: 30px; font: 600 12px/1.2 var(--cx-body); letter-spacing: 0.08em; color: var(--cx-cloud); }
.cx-site .cx-sol-guide > .cx-sol-tag { left: 186px; top: 23px; padding: 6px 12px; font-size: 12px; }
.cx-site .cx-sol-guide__legend { left: 868px; top: 28px; display: flex; gap: 28px; font: 500 13px/16px var(--cx-body); color: var(--cx-mist); }
.cx-site .cx-sol-guide__legend i { display: inline-block; width: 14px; height: 14px; margin-right: 8px; vertical-align: -2px; box-sizing: border-box; border-radius: 4px; }
.cx-site .cx-sol-guide__legend i.is-ad { background: var(--cx-amber); }
.cx-site .cx-sol-guide__legend i.is-now { background: rgba(245, 158, 11, 0.18); border: 1px solid rgba(245, 158, 11, 0.7); }
.cx-site .cx-sol-guide__tick { top: 74px; height: 14px; padding-left: 8px; border-left: 1px solid rgba(255, 255, 255, 0.25); font: 500 13px/14px var(--cx-body); color: var(--cx-mist); }
.cx-site .cx-sol-guide__rule { left: 24px; right: 24px; top: 100px; height: 1px; background: var(--cx-line); }
.cx-site .cx-sol-guide__now { z-index: 3; left: 626px; top: 50px; width: 2px; height: 504px; background: var(--cx-amber); box-shadow: 0 0 14px rgba(245, 158, 11, 0.9); }
.cx-site .cx-sol-guide__now span { position: absolute; left: 50%; top: -30px; transform: translateX(-50%); padding: 5px 10px; border-radius: 999px; background: var(--cx-amber); box-shadow: 0 0 16px rgba(245, 158, 11, 0.6); font: 600 11px/1.2 var(--cx-body); color: var(--cx-night); white-space: nowrap; }
.cx-site .cx-sol-guide__ch { left: 24px; width: 224px; height: 74px; box-sizing: border-box; border-radius: 14px; background: rgba(255, 255, 255, 0.04); border: 1px solid rgba(255, 255, 255, 0.08); }
.cx-site .cx-sol-guide__ch.is-on { background: rgba(255, 255, 255, 0.08); border-color: rgba(245, 158, 11, 0.5); }
.cx-site .cx-sol-guide__ch img { position: absolute; left: 12px; top: 12px; width: 48px; height: 48px; border-radius: 10px; object-fit: cover; }
.cx-site .cx-sol-guide__num { position: absolute; left: 72px; top: 18px; font: 600 11px/1.2 var(--cx-body); letter-spacing: 0.06em; color: var(--cx-amber); }
.cx-site .cx-sol-guide__name { position: absolute; left: 72px; top: 36px; font: 600 15px/1.2 var(--cx-body); color: var(--cx-cloud); white-space: nowrap; }
.cx-site .cx-sol-guide__prog { height: 74px; padding: 14px; box-sizing: border-box; border-radius: 14px; background: rgba(255, 255, 255, 0.05); border: 1px solid rgba(255, 255, 255, 0.1); }
.cx-site .cx-sol-guide__prog.is-now { background: rgba(245, 158, 11, 0.16); border-color: rgba(245, 158, 11, 0.7); }
.cx-site .cx-sol-guide__title { display: block; font: 600 14px/1.25 var(--cx-body); color: var(--cx-cloud); }
.cx-site .cx-sol-guide__time { position: absolute; left: 14px; top: 44px; font: 500 12px/1.2 var(--cx-body); color: var(--cx-mist); }
.cx-site .cx-sol-guide__prog.is-now .cx-sol-guide__title { color: var(--cx-white); }
.cx-site .cx-sol-guide__prog.is-now .cx-sol-guide__time { color: var(--cx-amber); }
.cx-site .cx-sol-guide__ad { width: 24px; height: 74px; display: grid; place-items: center; border-radius: 8px; background: rgba(245, 158, 11, 0.9); font: 600 10px/1 var(--cx-body); color: var(--cx-night); }

/* ================================================================== AI Streaming hero + review queue */

.cx-site .cx-sol-hero--ai { padding-top: 200px; margin-bottom: 214px; }
.cx-site .cx-sol-hero--ai .cx-sol-hero__copy { padding-top: 10px; }
.cx-site .cx-sol-hero--ai .cx-title--h1 { font-size: 76px; }
.cx-site .cx-sol-ai__sublabel { margin: 118px 0 0; font: 600 12px/1.2 var(--cx-body); letter-spacing: 0.08em; color: var(--cx-mist); }
.cx-site .cx-sol-clips { display: flex; gap: 16px; margin-top: 18px; }
.cx-site .cx-sol-clip {
	position: relative;
	flex: none;
	width: 170px;
	height: 302px;
	overflow: hidden;
	box-sizing: border-box;
	border-radius: 20px;
	background: var(--cx-navy-900);
	border: 1.5px solid rgba(255, 255, 255, 0.14);
	box-shadow: 0 24px 48px rgba(0, 0, 5, 0.45);
}
.cx-site .cx-sol-clip.is-on { border-color: rgba(245, 158, 11, 0.8); }
.cx-site .cx-sol-clip > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.cx-site .cx-sol-clip::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 182px; background: linear-gradient(to bottom, rgba(10, 23, 48, 0), rgba(10, 23, 48, 0.95)); }
.cx-site .cx-sol-clip .cx-sol-tag { position: absolute; z-index: 1; top: 12px; left: 12px; padding: 4px 9px; font-size: 10px; }
.cx-site .cx-sol-clip .cx-sol-clip__dur { left: auto; right: 12px; }
.cx-site .cx-sol-clip__pause { position: absolute; z-index: 1; left: 50%; top: 50%; width: 40px; height: 40px; margin: -20px 0 0 -20px; box-sizing: border-box; border-radius: 50%; background: rgba(255, 255, 255, 0.18); border: 1px solid rgba(255, 255, 255, 0.4); -webkit-backdrop-filter: blur(5px); backdrop-filter: blur(5px); }
.cx-site .cx-sol-clip__pause::before,
.cx-site .cx-sol-clip__pause::after { content: ""; position: absolute; top: 12px; width: 4px; height: 14px; border-radius: 1px; background: var(--cx-white); }
.cx-site .cx-sol-clip__pause::before { left: 14px; }
.cx-site .cx-sol-clip__pause::after { left: 20px; }
.cx-site .cx-sol-clip__title { position: absolute; z-index: 1; left: 14px; right: 14px; top: 248px; font: 600 15px/1.1 var(--cx-head); color: var(--cx-white); }

.cx-site .cx-sol-stage--ai { width: 640px; height: 574px; }
.cx-site .cx-sol-ai__phone .cx-phone__screen > .cx-sol-tag { position: absolute; z-index: 2; right: 22px; top: 40px; padding: 4px 9px; font-size: 12px; }
.cx-site .cx-sol-ai__phone .cx-phone__screen > .cx-sol-tag + .cx-sol-tag { top: 71px; }
.cx-site .cx-sol-subtitle {
	position: absolute;
	z-index: 2;
	left: 19px;
	right: 19px;
	top: 364px;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 6px;
	padding: 12px 10px;
	border-radius: 12px;
	background: rgba(10, 23, 48, 0.72);
	-webkit-backdrop-filter: blur(5px);
	backdrop-filter: blur(5px);
	text-align: center;
}
.cx-site .cx-sol-subtitle__line { font: 600 15px/1.35 var(--cx-body); color: var(--cx-white); }
.cx-site .cx-sol-subtitle__meta { font: 600 11px/1.2 var(--cx-body); letter-spacing: 0.04em; color: var(--cx-amber); }

.cx-site .cx-sol-assist { width: 300px; height: 322px; padding: 20px; }
.cx-site .cx-sol-assist__ask {
	display: block;
	width: 248px;
	margin: 14px 0 0 16px;
	padding: 12px 14px;
	box-sizing: border-box;
	border-radius: 16px 4px 16px 16px;
	background: rgba(245, 158, 11, 0.16);
	border: 1px solid rgba(245, 158, 11, 0.45);
	font: 500 14px/1.4 var(--cx-body);
	color: var(--cx-white);
	white-space: nowrap;
}
.cx-site .cx-sol-assist__ai { position: absolute; left: 20px; top: 130px; width: 30px; height: 30px; display: grid; place-items: center; border-radius: 50%; background: var(--cx-amber); font: 600 12px/1 var(--cx-head); color: var(--cx-night); }
.cx-site .cx-sol-assist__reply {
	position: absolute;
	left: 58px;
	top: 130px;
	width: 230px;
	height: 172px;
	padding: 12px;
	box-sizing: border-box;
	border-radius: 4px 16px 16px 16px;
	background: rgba(255, 255, 255, 0.06);
	border: 1px solid rgba(255, 255, 255, 0.12);
	font: 400 13px/1.4 var(--cx-body);
	color: var(--cx-cloud);
}
.cx-site .cx-sol-assist__clip { position: absolute; left: 12px; right: 12px; top: 56px; height: 104px; display: flex; gap: 10px; padding: 8px; box-sizing: border-box; border-radius: 12px; background: rgba(255, 255, 255, 0.05); border: 1px solid rgba(255, 255, 255, 0.1); }
.cx-site .cx-sol-assist__clip img { flex: none; width: 50px; height: 88px; border-radius: 8px; object-fit: cover; }
.cx-site .cx-sol-assist__meta { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; padding-top: 4px; }
.cx-site .cx-sol-assist__t { font: 600 13px/1.2 var(--cx-body); color: var(--cx-white); }
.cx-site .cx-sol-assist__d { font: 500 12px/1.2 var(--cx-body); color: var(--cx-mist); }
.cx-site .cx-sol-assist__meta .cx-sol-tag { padding: 3px 8px; font-size: 10px; }
.cx-site .cx-sol-langs { width: 300px; height: 232px; padding: 20px; }
.cx-site .cx-sol-langs .cx-sol-tags { gap: 8px; margin-top: 9px; }
.cx-site .cx-sol-langs .cx-sol-cap + .cx-sol-tags { margin-top: 16px; }

.cx-site .cx-sol-queue { display: flex; flex-direction: column; height: 530px; padding: 32px; border-radius: 32px; }
.cx-site .cx-sol-queue__head { display: flex; justify-content: space-between; align-items: center; height: 30px; margin-top: -8px; }
.cx-site .cx-sol-queue__head .cx-sol-tag { padding: 6px 12px; font-size: 12px; }
.cx-site .cx-sol-queue ul { margin: 32px 0 0; padding: 0; list-style: none; }
.cx-site .cx-sol-queue li { display: flex; align-items: center; gap: 16px; height: 86px; margin: 0; border-top: 1px solid rgba(255, 255, 255, 0.08); }
.cx-site .cx-sol-queue__icon { flex: none; width: 48px; height: 48px; display: grid; place-items: center; box-sizing: border-box; border-radius: 14px; background: rgba(245, 158, 11, 0.12); border: 1px solid rgba(245, 158, 11, 0.4); font: 600 14px/1 var(--cx-head); color: var(--cx-amber); }
.cx-site .cx-sol-queue__txt { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.cx-site .cx-sol-queue__title { font: 600 17px/1.2 var(--cx-body); color: var(--cx-white); }
.cx-site .cx-sol-queue__sub { font: 400 14px/1.3 var(--cx-body); color: var(--cx-mist); }
.cx-site .cx-sol-queue li .cx-sol-tag { margin-left: auto; padding: 7px 14px; font-size: 12px; }
.cx-site .cx-sol-queue .cx-sol-bigbtn { height: 58px; margin-top: auto; font-size: 16px; }

/* ================================================================== Responsive */

@media (max-width: 1240px) {
	.cx-site .cx-sol-cmpwrap,
	.cx-site .cx-sol-guidewrap { overflow-x: auto; margin-inline: -20px; padding: 0 20px 8px; scrollbar-width: thin; }
	.cx-site .cx-sol-cmp { width: 1200px; }
	.cx-site .cx-sol-stage--micro,
	.cx-site .cx-sol-stage--ai { zoom: 0.78; }
	.cx-site .cx-sol-stage--ott,
	.cx-site .cx-sol-devs { zoom: 0.82; }
	.cx-site .cx-sol-hero--fast .cx-sol-hero__grid { grid-template-columns: minmax(0, 1fr) auto; gap: 40px; }
	.cx-site .cx-sol-tile__phone, .cx-site .cx-sol-tile__glow { left: auto; right: 44px; }
	.cx-site .cx-sol-tile__glow { right: 0; }
	.cx-site .cx-sol-one__vis { zoom: 0.85; margin-left: 0; }
	.cx-site .cx-sol-wallet, .cx-site .cx-sol-queue { height: auto; min-height: 0; }
	.cx-site .cx-sol-wallet .cx-sol-bigbtn, .cx-site .cx-sol-queue .cx-sol-bigbtn { margin-top: 24px; }
	.cx-site .cx-sol-wallet__num { font-size: 38px; }
	.cx-site .cx-sol-pack { padding: 18px; }
}

@media (max-width: 1023px) {
	.cx-site .cx-sol-xhero .cx-title--h1,
	.cx-site .cx-sol-hero .cx-title--h1 { font-size: 58px; }
	.cx-site .cx-sol-hero__grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
	.cx-site .cx-sol-stage--micro,
	.cx-site .cx-sol-stage--ai { zoom: 0.62; }
	.cx-site .cx-sol-stage--ott,
	.cx-site .cx-sol-devs { zoom: 0.66; }
	.cx-site .cx-sol-tile__title { font-size: 34px; }
	.cx-site .cx-sol-xhero, .cx-site .cx-sol-tiles, .cx-site .cx-sol-compare, .cx-site .cx-sol-one,
	.cx-site .cx-sol-opp, .cx-site .cx-sol-stats, .cx-site .cx-sol-feat, .cx-site .cx-sol-how, .cx-site .cx-sol-money,
	.cx-site .cx-sol-dev, .cx-site .cx-sol-faq, .cx-site .cx-sol-epg { margin-bottom: var(--cx-gap); }
	.cx-site .cx-sol-hero { margin-bottom: var(--cx-gap) !important; }
	.cx-site .cx-sol-opp { margin-bottom: 80px; }
}

@media (max-width: 900px) {
	.cx-site .cx-sol-hero__grid,
	.cx-site .cx-sol-hero--fast .cx-sol-hero__grid { grid-template-columns: 1fr; gap: 48px; }
	.cx-site .cx-sol-hero--micro .cx-sol-hero__copy,
	.cx-site .cx-sol-hero--ai .cx-sol-hero__copy { padding-top: 0; }
	.cx-site .cx-sol-hero--micro, .cx-site .cx-sol-hero--ott, .cx-site .cx-sol-hero--fast, .cx-site .cx-sol-hero--ai, .cx-site .cx-sol-xhero { padding-top: 150px; }
	.cx-site .cx-sol-stage--micro,
	.cx-site .cx-sol-stage--ai { justify-self: center; zoom: 0.8; }
	.cx-site .cx-sol-stage--ott,
	.cx-site .cx-sol-devs { zoom: 0.55; }
	.cx-site .cx-sol-chans { justify-content: start; }
	.cx-site .cx-sol-hero--ott .cx-decor .cx-orbit { display: none; }
	.cx-site .cx-sol-ai__sublabel { margin-top: 56px; }

	.cx-site .cx-sol-bento { grid-template-columns: 1fr; grid-template-rows: none; grid-auto-rows: minmax(380px, auto); }
	.cx-site .cx-sol-tile--micro, .cx-site .cx-sol-tile--ott, .cx-site .cx-sol-tile--fast, .cx-site .cx-sol-tile--ai { grid-column: auto; }
	.cx-site .cx-sol-tile { padding-top: 120px; }
	.cx-site .cx-sol-one__vis { zoom: 1; max-width: 600px; }
	.cx-site .cx-sol-oppvis--photo, .cx-site .cx-sol-wallet, .cx-site .cx-sol-queue, .cx-site .cx-sol-models { max-width: 560px; }
	.cx-site .cx-sol-opp .cx-split__col--a, .cx-site .cx-sol-money .cx-split__col--b { padding-top: 0; }
	.cx-site .cx-sol-money .cx-split__col--a { order: 2; }
}

@media (max-width: 600px) {
	.cx-site .cx-sol-xhero .cx-title--h1,
	.cx-site .cx-sol-hero .cx-title--h1 { font-size: 46px; }
	.cx-site .cx-sol-hero--micro, .cx-site .cx-sol-hero--ott, .cx-site .cx-sol-hero--fast, .cx-site .cx-sol-hero--ai, .cx-site .cx-sol-xhero { padding-top: 132px; }
	.cx-site .cx-sol-cmpwrap, .cx-site .cx-sol-guidewrap { margin-inline: -16px; padding-inline: 16px; }
	.cx-site .cx-sol-hero__copy > .cx-btns { align-self: stretch; }

	/* Micro-drama / AI stages scale down to the phone width. */
	.cx-site .cx-sol-stage--micro { zoom: 0.48; }
	.cx-site .cx-sol-stage--ai { zoom: 0.55; }

	/* OTT hero: the TV alone, full width; floating cards hidden. */
	.cx-site .cx-sol-hero--ott .cx-sol-stagewrap { margin-top: 48px; }
	.cx-site .cx-sol-stage--ott { zoom: 1; width: 100%; height: auto; }
	.cx-site .cx-sol-stage--ott > .cx-tv { position: relative; left: auto !important; top: auto !important; --w: 100% !important; }
	.cx-site .cx-sol-ott__live, .cx-site .cx-sol-ott__drm, .cx-site .cx-sol-ott__prof { display: none; }

	/* Devices stage: phones tucked in, stage 900 wide. */
	.cx-site .cx-sol-devs { width: 900px; zoom: 0.4; }
	.cx-site .cx-sol-devs__tv { left: 40px; }
	.cx-site .cx-sol-devs__left { left: 0; }
	.cx-site .cx-sol-devs__right { left: 703px; }
	.cx-site .cx-sol-devs__orbit { left: -50px; }
	.cx-site .cx-sol-dev .cx-head + * { margin-top: 40px; }
	.cx-site .cx-sol-pills { margin-top: 28px; gap: 8px; }

	.cx-site .cx-sol-chans { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
	.cx-site .cx-sol-clips { align-self: stretch; overflow-x: auto; margin-inline: -16px; padding: 0 16px 12px; scrollbar-width: none; }

	.cx-site .cx-sol-tile { padding: 120px 24px 28px; border-radius: 28px; }
	.cx-site .cx-sol-tile__phone, .cx-site .cx-sol-tile__glow { display: none; }
	.cx-site .cx-sol-tile__title { font-size: 32px; }
	.cx-site .cx-sol-tile__glyph { top: 18px; right: 18px; }

	.cx-site .cx-sol-one__vis { zoom: 0.58; width: 600px; height: 430px; }
	.cx-site .cx-sol-one__vis .cx-dash { zoom: 1; }

	.cx-site .cx-sol-oppvis--photo { height: 440px; }
	.cx-site .cx-sol-overcard { left: 14px; right: 14px; bottom: 14px; padding: 18px; height: auto; gap: 14px; }
	.cx-site .cx-sol-overcard__title { font-size: 22px; }
	.cx-site .cx-sol-adbar > span { width: auto !important; flex: 3 1 0; min-width: 0; }
	.cx-site .cx-sol-adbar > span.is-ad { flex: 1 1 0; }
	.cx-site .cx-sol-wallet, .cx-site .cx-sol-queue { padding: 22px; border-radius: 26px; }
	.cx-site .cx-sol-wallet__bal { flex-wrap: wrap; }
	.cx-site .cx-sol-wallet__bal .cx-sol-tag { margin-left: 0; }
	.cx-site .cx-sol-wallet__num { font-size: 34px; }
	.cx-site .cx-sol-wallet__packs { gap: 10px; margin-top: 24px; }
	.cx-site .cx-sol-pack { height: auto; padding: 14px; }
	.cx-site .cx-sol-pack .cx-sol-tag { top: -10px; right: 8px; }
	.cx-site .cx-sol-pack__num { font-size: 24px; }
	.cx-site .cx-sol-pack__l1 { margin-top: 12px; }
	.cx-site .cx-sol-queue li { height: auto; padding: 14px 0; gap: 12px; flex-wrap: wrap; }
	.cx-site .cx-sol-queue__head { flex-wrap: wrap; height: auto; gap: 8px; margin-top: 0; }
	.cx-site .cx-sol-queue ul { margin-top: 20px; }
	.cx-site .cx-sol-bigbtn { height: auto !important; padding: 16px; text-align: center; font-size: 15px; }
	.cx-site .cx-sol-models { padding: 0 20px 16px; }
	.cx-site .cx-sol-models__list li { font-size: 16px; }
	.cx-site .cx-sol-stats .cx-stat__num { font-size: 40px; }
}