/*
 * ThetaRay block theme: component styles.
 * Colours, fonts and spacing presets live in theme.json; this file ports the Next.js site's
 * Tailwind classes to plain CSS, one section per homepage pattern. Product visuals have their
 * own compiled file (visuals.css).
 */

:root {
	--tr-navy: var(--wp--preset--color--navy, #223a75);
	--tr-navy-900: var(--wp--preset--color--navy-900, #0f1b35);
	--tr-blue: var(--wp--preset--color--blue, #3888ff);
	--tr-blue-ink: var(--wp--preset--color--blue-ink, #1a5fc4);
	--tr-pink: var(--wp--preset--color--pink, #ff25ad);
	--tr-purple: var(--wp--preset--color--purple, #9b4090);
	--tr-ray: var(--wp--preset--color--ray, #40a8f0);
	--tr-ray-light: var(--wp--preset--color--ray-light, #60d8ff);
	--tr-ray-ink: var(--wp--preset--color--ray-ink, #1a73b8);
	--tr-body: var(--wp--preset--color--body, #48587a);
	--tr-body-2: var(--wp--preset--color--body-2, #3d4d6e);
	--tr-body-3: var(--wp--preset--color--body-3, #4a5a7d);
	--tr-muted: var(--wp--preset--color--muted, #5c6b8a);
	--tr-muted-2: var(--wp--preset--color--muted-2, #6b7a99);
	--tr-surface: var(--wp--preset--color--surface, #f5f8fd);
	--tr-surface-2: var(--wp--preset--color--surface-2, #eef3fb);
	--tr-line: rgba(34, 58, 117, 0.12);
	--tr-ease-out: cubic-bezier(0.2, 0.7, 0.2, 1);
	--tr-ease-expo: cubic-bezier(0.16, 1, 0.3, 1);
	--tr-shadow-pop: 0 24px 52px rgba(15, 27, 53, 0.16);
	--tr-ink: linear-gradient(100deg, #223a75 0%, #1a5fc4 40%, #3888ff 72%, #40a8f0 100%);
	--tr-ink-light: linear-gradient(100deg, #ffffff 10%, #9fd4ff 55%, #60d8ff 100%);
	--tr-theta-icon: url(../images/thetaray-icon.png?v=a850eee692);
	--tr-ray-icon: url(../images/ray-icon.png?v=d11bf75d69);
}

/* Metric-matched Arial fallback (same values next/font generates), also used for glyphs Montserrat lacks such as →. */
@font-face {
	font-family: "Montserrat Fallback";
	src: local("Arial");
	ascent-override: 85.79%;
	descent-override: 22.25%;
	line-gap-override: 0%;
	size-adjust: 112.83%;
}

/* Product hues (README colour pairing). --hue-ink is the AA-safe text colour on white. */
.tr-hue-navy { --hue: #223a75; --hue-ink: #223a75; --hue-rgb: 34, 58, 117; }
.tr-hue-pink { --hue: #ff25ad; --hue-ink: #c40080; --hue-rgb: 255, 37, 173; }
.tr-hue-blue { --hue: #3888ff; --hue-ink: #1a5fc4; --hue-rgb: 56, 136, 255; }
.tr-hue-purple { --hue: #9b4090; --hue-ink: #9b4090; --hue-rgb: 155, 64, 144; }
.tr-hue-gray { --hue: #9eadc8; --hue-ink: #48587a; --hue-rgb: 158, 173, 200; }
.tr-hue-red { --hue: #f5013e; --hue-ink: #c8002f; --hue-rgb: 245, 1, 62; }
.tr-hue-ray { --hue: #40a8f0; --hue-ink: #1a73b8; --hue-rgb: 64, 168, 240; }

/* ---------- Base ---------- */
*, ::before, ::after { box-sizing: border-box; }
html {
	-webkit-tap-highlight-color: transparent;
	-webkit-text-size-adjust: 100%;
	scroll-behavior: smooth;
	scroll-padding-top: 88px;
	background: var(--tr-surface);
	overflow-x: clip;
}
body {
	margin: 0;
	-webkit-font-smoothing: antialiased;
	overflow-x: clip;
}
button, a, [role="button"] { touch-action: manipulation; }
input, textarea, select { font-size: 16px; }
:focus-visible { outline: 2px solid var(--tr-blue); outline-offset: 2px; border-radius: 4px; }
body figure, .tr-header figure, .tr-footer figure { margin: 0; }
body h1, body h2, body h3, body p, .tr-footer h2, .tr-footer p { margin: 0; }
body strong { font-weight: 700; }
.tr-container { max-width: 1180px; margin-inline: auto; width: 100%; }
/* A grid with no columns of its own has one "auto" column, which WebKit (Safari, and every browser on an iPhone) sizes
   to the widest thing in it, such as a card image at its natural width, so the grid ran past a phone's screen (review
   round 12: the blog listing). These grids get one column that can shrink instead; a rule that sets columns overrides
   it, as :where() adds no specificity. dev/build-assets.mjs --check lists any new grid that needs adding here. */
:where(
	.tr-statement__grid, .tr-ptab, .tr-ptab__agent, .tr-ptool, .tr-ray-band, .tr-ray-panel, .tr-meet__grid, .tr-steps,
	.tr-cards, .tr-faq__grid, .tr-faq__list, .tr-footer__top, .tr-footer__links, .tr-article__grid, .tr-toc ol,
	.tr-article__body > ul, .tr-article__body > ol, .tr-post-header__grid, .tr-post-grid, .tr-nlead, .tr-channels,
	.tr-erow, .tr-demo__grid, body .tr-demo__points, .tr-scards__grid, .tr-hcards__list, .tr-hcard, .tr-xhub__card,
	.tr-xhub__links, .tr-values__grid, .tr-vfeature__grid, .tr-compare__rows, .tr-compare__row, .tr-live__grid,
	.tr-live__side, .tr-feed, .tr-psteps__grid, .tr-agent__stage, .tr-suite__list, .tr-split__grid,
	body .tr-split__bullets, .tr-rheader__grid, .tr-rheader__facts, body .tr-takeaways__list,
	body .tr-article__body > .tr-astats, .tr-contact__grid, .tr-contact__channels, .tr-contact-form, .tr-form__row,
	.tr-form__field, .tr-offices__grid, .tr-offices__channels, .tr-bento, .tr-people__groups, .tr-jobs__grid,
	.tr-modes__grid, .tr-demo-pop__content, .tr-glossary__groups, .tr-glossary__list, .tr-ind__grid, .tr-ind__rail-inner,
	.tr-ind__tabs, .tr-ind__body, .tr-ind__plinks, .tr-trust__reqs, .tr-trust__detail, .tr-trust__detail ul,
	.tr-trust__answer ul, .tr-trust__grid, .tr-trust__subs, .tr-trust__faqs, .tr-trust__answer, .tr-bars ul,
	.tr-gloss__groups, .tr-gloss__group, .tr-gloss__group ul, .tr-gterm__grid, .tr-gterm__aside, .tr-briefs__list,
	.tr-brief, .tr-brief__summary, .tr-sol__grid, .tr-sol__tabs, .tr-sol__stage, .tr-sol__compare, .tr-sol__pains,
	.tr-sol__values, .tr-sol__plinks, .tr-contact__points, .tr-note__grid, .tr-roibench__list, .tr-scope__grid,
	.tr-pair__grid, .tr-formpanel__grid, .tr-roi__layout, .tr-roi .assump-grid, .tr-roi .advanced-panel.open,
	.tr-roiwhy__steps, .tr-hsform__loading
) { grid-template-columns: minmax(0, 1fr); }
.tr-section { position: relative; }
body .wp-block-buttons { gap: 12px; }

/* Display headline + gradient ink on bold words ("**bold**" in the CMS). */
.tr-display {
	font-weight: 300;
	letter-spacing: -0.04em;
	line-height: 1.06;
	text-wrap: balance;
	color: var(--tr-navy);
}
body :is(h1, h2, .tr-platform__closing) strong {
	background: var(--tr-ink);
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
}
body .tr-dark :is(h1, h2) strong {
	background: var(--tr-ink-light);
	-webkit-background-clip: text;
	background-clip: text;
}
.tr-lead {
	font-size: 17px;
	font-weight: 300;
	line-height: 1.65;
	color: var(--tr-body);
	text-wrap: pretty;
}
@media (min-width: 768px) { .tr-lead { font-size: 19px; } }

.tr-eyebrow {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--tr-blue-ink);
}
.tr-eyebrow--theta::before, .tr-eyebrow--ray::before {
	content: "";
	width: 18px;
	height: 18px;
	flex: none;
	background: var(--tr-theta-icon) center / contain no-repeat;
}
.tr-eyebrow--theta { gap: 9px; }
.tr-eyebrow--ray::before { width: 16px; height: 16px; background-image: var(--tr-ray-icon); }

/* Product marker: the ThetaRay pin filled with the product hue. */
.tr-brand-icon {
	display: inline-block;
	flex: none;
	width: 16px;
	height: 16px;
	background: linear-gradient(150deg, var(--hue, #223a75), var(--hue-ink, #223a75));
	-webkit-mask: var(--tr-theta-icon) center / contain no-repeat;
	mask: var(--tr-theta-icon) center / contain no-repeat;
}

/* ---------- Buttons ---------- */
.wp-block-button__link.wp-element-button,
.tr-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	min-height: 48px;
	padding: 0 28px;
	border: 1px solid transparent;
	border-radius: 999px;
	background: var(--tr-blue);
	color: #fff;
	font-family: inherit;
	font-size: 15px;
	font-weight: 600;
	line-height: 1;
	white-space: nowrap;
	cursor: pointer;
	text-decoration: none;
	user-select: none;
	transition: transform 120ms var(--tr-ease-out), background-color 160ms, color 160ms, border-color 160ms, box-shadow 160ms;
}
.wp-block-button__link.wp-element-button:active { transform: scale(0.97); }
.tr-btn-md .wp-block-button__link.wp-element-button { min-height: 42px; padding: 0 20px; font-size: 14px; }
.tr-btn-lg .wp-block-button__link.wp-element-button { min-height: 52px; padding: 0 36px; font-size: 16px; }
.is-style-pink .wp-block-button__link.wp-element-button { background: var(--tr-pink); }
/* Buttons and text links have no trailing arrow (review round 3, item 4); cards keep theirs. */
@media (hover: hover) and (pointer: fine) {
	.wp-block-button__link.wp-element-button:hover { background: #2476f0; color: #fff; box-shadow: 0 10px 24px rgba(56, 136, 255, 0.3); }
	.is-style-pink .wp-block-button__link.wp-element-button:hover { background: var(--tr-purple); box-shadow: none; }
	.tr-card:hover .tr-card__blurb::after { transform: translateX(4px); }
}

/* ---------- Motion primitives ---------- */
.tr-reveal, .tr-reveal-rise {
	transition:
		opacity 0.9s var(--tr-ease-expo) var(--reveal-delay, 0ms),
		transform 1.1s var(--tr-ease-expo) var(--reveal-delay, 0ms),
		filter 0.9s var(--tr-ease-expo) var(--reveal-delay, 0ms);
}
.js .tr-reveal:not(.is-visible) { opacity: 0; transform: translate3d(0, 32px, 0) scale(0.985); filter: blur(10px); }
.js .tr-reveal-rise:not(.is-visible) { opacity: 0; transform: translate3d(0, 64px, 0) scale(0.96); filter: blur(10px); }

.tr-glass {
	background: rgba(255, 255, 255, 0.72);
	-webkit-backdrop-filter: blur(22px) saturate(180%);
	backdrop-filter: blur(22px) saturate(180%);
	border: 1px solid rgba(255, 255, 255, 0.6);
}
.tr-card-premium, .tr-faq__item, .tr-card, .tr-platform__card {
	background: #fff;
	border: 1px solid rgba(34, 58, 117, 0.08);
	box-shadow: 0 1px 0 rgba(255, 255, 255, 0.9) inset, 0 1px 2px rgba(15, 27, 53, 0.04), 0 18px 40px -18px rgba(15, 27, 53, 0.22);
}

/* Pointer-following light (JS sets --mx/--my). */
.tr-spotlight { position: relative; isolation: isolate; }
.tr-spotlight::before {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: inherit;
	pointer-events: none;
	opacity: 0;
	transition: opacity 0.4s var(--tr-ease-expo);
	background: radial-gradient(420px circle at var(--mx, 50%) var(--my, 0%), var(--spot, rgba(56, 136, 255, 0.12)), transparent 60%);
	z-index: -1;
}
@media (hover: hover) and (pointer: fine) {
	.tr-spotlight:hover::before { opacity: 1; }
	.tr-lift.is-visible { transition: transform 0.5s var(--tr-ease-expo), box-shadow 0.5s var(--tr-ease-expo), border-color 0.3s, opacity 0.9s var(--tr-ease-expo) var(--reveal-delay, 0ms), filter 0.9s var(--tr-ease-expo) var(--reveal-delay, 0ms); }
	.tr-lift:hover { transform: translateY(-4px); box-shadow: 0 1px 0 rgba(255, 255, 255, 0.9) inset, 0 30px 60px -24px rgba(15, 27, 53, 0.32); }
}

/* Drifting brand light for dark stages. */
.tr-aurora { position: absolute; inset: -20%; pointer-events: none; filter: blur(80px); opacity: 0.75; }
.tr-aurora > span {
	position: absolute;
	width: 46%;
	aspect-ratio: 1;
	border-radius: 50%;
	mix-blend-mode: screen;
	animation: aurora-drift 22s ease-in-out infinite alternate;
}
.tr-aurora > span:nth-child(1) { left: 8%; top: 18%; background: radial-gradient(closest-side, rgba(56, 136, 255, 0.55), transparent); }
.tr-aurora > span:nth-child(2) { right: 6%; top: 8%; background: radial-gradient(closest-side, rgba(96, 216, 255, 0.35), transparent); animation-duration: 28s; animation-delay: -6s; }
.tr-aurora > span:nth-child(3) { left: 32%; bottom: 0; background: radial-gradient(closest-side, rgba(26, 95, 196, 0.55), transparent); animation-duration: 34s; animation-delay: -12s; }
.tr-grid-fade {
	position: absolute;
	inset: 0;
	pointer-events: none;
	background-image: linear-gradient(rgba(34, 58, 117, 0.06) 1px, transparent 1px), linear-gradient(90deg, rgba(34, 58, 117, 0.06) 1px, transparent 1px);
	background-size: 56px 56px;
	-webkit-mask-image: radial-gradient(ellipse 70% 60% at 50% 0%, #000 30%, transparent 75%);
	mask-image: radial-gradient(ellipse 70% 60% at 50% 0%, #000 30%, transparent 75%);
}
.tr-grid-fade--dark { background-image: linear-gradient(rgba(255, 255, 255, 0.05) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, 0.05) 1px, transparent 1px); }

/* The section after a dark stage slides up over it like a sheet. */
.tr-stage + section {
	z-index: 2;
	margin-top: -40px;
	border-radius: 40px 40px 0 0;
	box-shadow: 0 -24px 60px -20px rgba(15, 27, 53, 0.35);
}
@media (max-width: 767px) {
	.tr-stage + section { margin-top: -24px; border-radius: 28px 28px 0 0; }
}

/* ======================================================================
   Header
   ====================================================================== */
.tr-header {
	position: fixed;
	inset: 0 0 auto;
	z-index: 50;
	padding: calc(env(safe-area-inset-top) + 10px) 12px 0;
	pointer-events: none;
}
.admin-bar .tr-header { top: var(--wp-admin--admin-bar--height, 32px); }
@media (min-width: 768px) { .tr-header { padding-inline: 20px; } }
.tr-header__bar {
	position: relative;
	max-width: 1240px;
	height: 58px;
	margin-inline: auto;
	padding: 0 16px;
	gap: 24px;
	align-items: center;
	pointer-events: auto;
	transition: height 0.5s var(--tr-ease-expo);
}
@media (min-width: 768px) { .tr-header__bar { height: 64px; padding: 0 24px; } }
.tr-header.is-scrolled .tr-header__bar { height: 54px; }
@media (min-width: 768px) { .tr-header.is-scrolled .tr-header__bar { height: 56px; } }
/* Glass material on a pseudo element, so the bar never becomes a containing block for the fixed menus. */
.tr-header__bar::before {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: 999px;
	background: rgba(255, 255, 255, 0.72);
	-webkit-backdrop-filter: blur(22px) saturate(180%);
	backdrop-filter: blur(22px) saturate(180%);
	border: 1px solid rgba(255, 255, 255, 0.6);
	transition: background-color 0.5s, box-shadow 0.5s, border-color 0.5s;
	pointer-events: none;
}
.tr-header.is-scrolled .tr-header__bar::before { box-shadow: 0 18px 40px -20px rgba(15, 27, 53, 0.35); }
.tr-header.is-dark .tr-header__bar::before {
	background: rgba(15, 27, 53, 0.42);
	-webkit-backdrop-filter: blur(22px) saturate(160%);
	backdrop-filter: blur(22px) saturate(160%);
	border-color: rgba(255, 255, 255, 0.12);
}
.tr-header.is-dark.is-scrolled .tr-header__bar::before { box-shadow: 0 18px 40px -18px rgba(0, 0, 0, 0.6); }
.tr-header__bar > * { position: relative; }
.tr-header__logo { flex: none; margin-right: auto !important; }
.tr-header__logo img { display: block; height: 20px !important; width: auto !important; transition: filter 0.5s; }
@media (min-width: 768px) { .tr-header__logo img { height: 22px !important; } }
.tr-header.is-dark .tr-header__logo img { filter: brightness(0) invert(1); }
.tr-header__actions { flex: none; gap: 8px; align-items: center; }
@media (min-width: 768px) { .tr-header__actions { gap: 12px; } }
@media (max-width: 639px) { .tr-header__cta, .tr-lang { display: none !important; } }

/* Shared nav item look (top level). The pill padding sits on the item itself and the chevron stays inline
   after the label, so items lay out the same on the site and in the editor (which wraps items differently). */
.tr-header__bar .wp-block-navigation { --nav-ink: var(--tr-body); --nav-ink-hover: var(--tr-navy); --nav-hover-bg: rgba(34, 58, 117, 0.05); font-size: 14px; font-weight: 500; color: var(--nav-ink); }
.tr-header.is-dark .tr-header__bar .wp-block-navigation { --nav-ink: rgba(255, 255, 255, 0.8); --nav-ink-hover: #fff; --nav-hover-bg: rgba(255, 255, 255, 0.1); }
.tr-nav .wp-block-navigation__container { gap: 4px; }
.tr-header__bar .wp-block-navigation__container > .wp-block-navigation-item {
	padding: 8px 14px;
	border-radius: 999px;
	color: var(--nav-ink);
	transition: color 0.15s, background-color 0.15s;
}
.tr-header__bar .wp-block-navigation__container > .wp-block-navigation-item > .wp-block-navigation-item__content { padding: 0; color: inherit; }
.tr-header__bar .wp-block-navigation__container > .wp-block-navigation-item:hover,
.tr-header__bar .wp-block-navigation__container > .wp-block-navigation-item:focus-within {
	color: var(--nav-ink-hover);
	background: var(--nav-hover-bg);
}
@media (min-width: 1024px) and (max-width: 1279px) {
	.tr-nav .wp-block-navigation__container > .wp-block-navigation-item { padding-inline: 10px; }
}
.tr-header__bar .wp-block-navigation__container > .has-child > .wp-block-navigation__submenu-icon {
	position: static;
	flex: none;
	width: 10px;
	height: 10px;
	margin: 0 0 0 6px;
	padding: 0;
	color: inherit;
	transition: transform 0.2s;
}
.tr-header__bar .wp-block-navigation__container > .has-child:hover > .wp-block-navigation__submenu-icon,
.tr-header__bar .wp-block-navigation__container > .has-child:focus-within > .wp-block-navigation__submenu-icon { transform: rotate(180deg); }
.tr-header__bar .wp-block-navigation__submenu-icon svg { width: 10px; height: 10px; stroke-width: 2; }

/* Dropdown panels: white glass cards */
.tr-header .wp-block-navigation .has-child > .wp-block-navigation__submenu-container {
	border: 1px solid rgba(255, 255, 255, 0.7);
	border-radius: 22px;
	background: rgba(255, 255, 255, 0.9);
	-webkit-backdrop-filter: blur(40px);
	backdrop-filter: blur(40px);
	box-shadow: var(--tr-shadow-pop);
	color: var(--tr-navy);
	padding: 0;
	font-size: 14px;
}
.tr-header .wp-block-navigation .has-child > .wp-block-navigation__submenu-container::before {
	/* Hover bridge across the gap between the bar and the panel. */
	content: "";
	position: absolute;
	inset: -14px 0 auto;
	height: 14px;
}
/* Desktop dropdowns only: in the mobile menu a tap's hover/focus must not change anything, or the tap is spent on it. */
@media (min-width: 1024px) {
	.tr-header .wp-block-navigation .has-child:hover > .wp-block-navigation__submenu-container,
	.tr-header .wp-block-navigation .has-child:focus-within > .wp-block-navigation__submenu-container,
	.tr-header .wp-block-navigation .has-child > .wp-block-navigation-submenu__toggle[aria-expanded="true"] ~ .wp-block-navigation__submenu-container {
		animation: panel-in 0.35s var(--tr-ease-expo);
	}
}
.tr-header .wp-block-navigation__submenu-container .wp-block-navigation-item { background: transparent; }
.tr-header .wp-block-navigation-item__description { display: block; font-size: 12px; font-weight: 400; line-height: 1.45; color: var(--tr-muted-2); }
.tr-header .wp-block-navigation__submenu-container .wp-block-navigation-item__content { display: flex !important; flex-direction: column; gap: 2px; color: var(--tr-navy); }
.tr-header .wp-block-navigation__submenu-container .wp-block-navigation-item__label { font-weight: 600; }

@media (min-width: 1024px) {
	/*
	 * Platform and Industries: wide panels centred under the bar, 12px below its real bottom edge (as on the site).
	 * theme.js sets --tr-bar-bottom and --tr-item-bottom from the bar and the menu items, so the gap is the same
	 * logged in or out (admin bar) and in every scroll state.
	 */
	.tr-menu--platform > .wp-block-navigation__submenu-container,
	.tr-menu--solutions > .wp-block-navigation__submenu-container,
	.tr-menu--industries > .wp-block-navigation__submenu-container {
		position: fixed !important;
		left: 50% !important;
		top: calc(var(--tr-bar-bottom, 74px) + 12px) !important;
		transform: translateX(-50%);
		overflow: hidden !important;
	}
	/* Platform (28 Oct design): the two hub cards side by side; the products are under Solutions. */
	.tr-header .tr-menu--platform:is(:hover, :focus-within, .is-open) > .wp-block-navigation__submenu-container { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; padding: 8px; width: min(680px, calc(100vw - 48px)) !important; }
	/* Solutions: the tagline row, then the eight solutions with their notes in two columns. */
	.tr-header .tr-menu--solutions:is(:hover, :focus-within, .is-open) > .wp-block-navigation__submenu-container { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2px; padding: 0 12px 12px; width: min(680px, calc(100vw - 48px)) !important; }
	/* Industries (28 Oct design): the tagline row, then the ten segments in two columns of five, down then across. */
	.tr-header .tr-menu--industries:is(:hover, :focus-within, .is-open) > .wp-block-navigation__submenu-container { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: auto repeat(5, 1fr); grid-auto-flow: column; gap: 2px; padding: 0 12px 12px; width: min(560px, calc(100vw - 48px)) !important; }
	.tr-header .tr-menu--industries .tr-menu__lead { grid-row: 1; }
	/* Hover bridge from the menu item down to the panel: part of the item, so the panel's overflow can't clip it. */
	.tr-header__bar .tr-menu--platform::after,
	.tr-header__bar .tr-menu--solutions::after,
	.tr-header__bar .tr-menu--industries::after {
		content: "";
		position: absolute;
		left: -16px;
		right: -16px;
		top: 100%;
		display: none;
		height: max(0px, calc(var(--tr-bar-bottom, 74px) + 14px - var(--tr-item-bottom, 60px)));
	}
	.tr-header__bar .tr-menu--platform:is(:hover, .is-open)::after,
	.tr-header__bar .tr-menu--solutions:is(:hover, .is-open)::after,
	.tr-header__bar .tr-menu--industries:is(:hover, .is-open)::after { display: block; }
	/* The open state theme.js keeps for 150ms after the pointer leaves, so a diagonal move doesn't close the panel. */
	.tr-header .wp-block-navigation .has-child.is-open > .wp-block-navigation__submenu-container { visibility: visible; opacity: 1; width: auto; height: auto; min-width: 200px; }
}
/*
 * Platform panel (28 Oct design): two hub cards, each the hub's icon, name and badge, its note and its blurb (the
 * description), on its own tint. No arrow: the whole card is the link.
 */
.tr-menu--platform .tr-menu__hub > .wp-block-navigation-item__content { position: relative; display: flex !important; flex-direction: column; align-items: flex-start; gap: 4px !important; height: 100%; padding: 20px !important; overflow: hidden; border-radius: 18px; background: linear-gradient(160deg, #f7f9fd, #eaf0fa); transition: box-shadow 0.3s; }
.tr-menu--platform .tr-menu__ray > .wp-block-navigation-item__content { background: linear-gradient(160deg, #f6fcff, #e6f5fd); }
.tr-menu--platform .tr-menu__hub > .wp-block-navigation-item__content::before { content: ""; position: absolute; right: -40px; top: -48px; width: 144px; height: 144px; border-radius: 50%; background: radial-gradient(closest-side, rgba(34, 58, 117, 0.14), transparent); pointer-events: none; }
.tr-menu--platform .tr-menu__ray > .wp-block-navigation-item__content::before { background: radial-gradient(closest-side, rgba(64, 168, 240, 0.28), transparent); }
.tr-menu--platform .tr-menu__hub > .wp-block-navigation-item__content:hover { box-shadow: 0 18px 36px -24px rgba(34, 58, 117, 0.5); }
.tr-menu--platform .tr-menu__ray > .wp-block-navigation-item__content:hover { box-shadow: 0 18px 36px -24px rgba(26, 115, 184, 0.6); }
.tr-menu--platform .tr-menu__hub .wp-block-navigation-item__label { position: relative; display: flex; flex-wrap: wrap; align-items: center; gap: 0 8px; font-size: 17px; font-weight: 700 !important; color: var(--tr-navy); }
.tr-menu--platform .tr-menu__hub .wp-block-navigation-item__label::before { content: ""; width: 20px; height: 20px; background: var(--tr-theta-icon) center / contain no-repeat; }
.tr-menu--platform .tr-menu__ray .wp-block-navigation-item__label { color: var(--tr-blue-ink); }
.tr-menu--platform .tr-menu__ray .wp-block-navigation-item__label::before { background-image: var(--tr-ray-icon); }
.tr-menu--platform .tr-menu__note { flex-basis: 100%; margin-top: 12px; font-size: 14px; font-weight: 600; line-height: 1.4; color: var(--tr-navy); }
.tr-menu--platform .tr-menu__hub .wp-block-navigation-item__description { position: relative; font-size: 13px; line-height: 1.375; }
/* Italic text in a menu label renders as a small badge ("Tech stack agnostic"). */
.tr-header .wp-block-navigation-item__label em {
	margin-left: 4px;
	font-style: normal;
	white-space: nowrap;
	border-radius: 999px;
	background: #fff;
	box-shadow: inset 0 0 0 1px rgba(64, 168, 240, 0.35);
	padding: 2px 10px;
	font-size: 12px;
	font-weight: 600;
	color: var(--tr-blue-ink);
}
/* Solutions and Industries panels: the tagline row opens the page; then the items (Solutions with their notes). */
:is(.tr-menu--industries, .tr-menu--solutions) .wp-block-navigation-item > .wp-block-navigation-item__content { padding: 8px 12px !important; border-radius: 12px; font-size: 14px; line-height: 1.375; transition: background-color 0.15s; }
.tr-menu--solutions .wp-block-navigation-item > .wp-block-navigation-item__content { gap: 2px !important; padding: 10px 12px !important; }
.tr-menu--solutions .wp-block-navigation-item__description { font-size: 12.5px; line-height: 1.375; }
:is(.tr-menu--industries, .tr-menu--solutions) .wp-block-navigation-item > .wp-block-navigation-item__content:hover { background: var(--tr-surface); }
:is(.tr-menu--industries, .tr-menu--solutions) .tr-menu__lead { grid-column: 1 / -1; margin: 0 -12px 10px; }
:is(.tr-menu--industries, .tr-menu--solutions) .tr-menu__lead > .wp-block-navigation-item__content { position: relative; justify-content: center; min-height: 64px; padding: 16px 64px 16px 24px !important; border-radius: 0; border-bottom: 1px solid rgba(56, 136, 255, 0.18); background: linear-gradient(90deg, rgba(56, 136, 255, 0.12), rgba(56, 136, 255, 0.04)) !important; }
:is(.tr-menu--industries, .tr-menu--solutions) .tr-menu__lead > .wp-block-navigation-item__content:hover { background: linear-gradient(90deg, rgba(56, 136, 255, 0.18), rgba(56, 136, 255, 0.08)) !important; }
:is(.tr-menu--industries, .tr-menu--solutions) .tr-menu__lead .wp-block-navigation-item__label { font-size: 15px; font-weight: 700 !important; color: var(--tr-blue-ink); }
:is(.tr-menu--industries, .tr-menu--solutions) .tr-menu__lead > .wp-block-navigation-item__content::after {
	content: "";
	position: absolute;
	right: 24px;
	top: 50%;
	width: 32px;
	height: 32px;
	translate: 0 -50%;
	border-radius: 50%;
	background: var(--tr-blue) url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 16 16%27 fill=%27none%27 stroke=%27%23fff%27 stroke-width=%272%27 stroke-linecap=%27round%27 stroke-linejoin=%27round%27%3E%3Cpath d=%27M3 8h10M9 4l4 4-4 4%27/%3E%3C/svg%3E") center / 14px no-repeat;
	box-shadow: 0 6px 16px -6px rgba(56, 136, 255, 0.7);
	transition: transform 0.4s var(--tr-ease-expo);
}
:is(.tr-menu--industries, .tr-menu--solutions) .tr-menu__lead > .wp-block-navigation-item__content:hover::after { transform: translateX(3px); }
@media (min-width: 1024px) {
	.tr-menu--company > .wp-block-navigation__submenu-container { left: 50% !important; transform: translateX(-50%); top: calc(100% + 12px) !important; }
	/* Desktop only: on phones this narrowed the mobile menu's Company grid under the finger (review round 1, item 6). */
	.tr-header .tr-menu--company:is(:hover, :focus-within, .is-open) > .wp-block-navigation__submenu-container { width: 240px !important; padding: 8px; }
}
.tr-menu--company .wp-block-navigation__submenu-container .wp-block-navigation-item__content,
.tr-menu--lang .wp-block-navigation__submenu-container .wp-block-navigation-item__content { padding: 10px 16px !important; border-radius: 16px; font-weight: 600; transition: background-color 0.15s; }
@media (hover: hover) {
	.tr-menu--company .wp-block-navigation__submenu-container .wp-block-navigation-item__content:hover,
	.tr-menu--lang .wp-block-navigation__submenu-container .wp-block-navigation-item__content:hover { background: var(--tr-surface); }
}

/* Language menu */
.tr-lang { font-size: 13px !important; }
.tr-lang .wp-block-navigation__container > .tr-menu--lang { height: 40px; padding: 0 12px; font-weight: 600; }
.tr-lang .wp-block-navigation__container > .tr-menu--lang > .wp-block-navigation-item__content { display: inline-flex; align-items: center; gap: 6px; }
.tr-lang .tr-menu--lang > .wp-block-navigation-item__content::before {
	content: "";
	width: 16px;
	height: 16px;
	background: currentColor;
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.7'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M3 12h18M12 3c2.5 2.7 3.8 5.7 3.8 9s-1.3 6.3-3.8 9c-2.5-2.7-3.8-5.7-3.8-9S9.5 5.7 12 3Z'/%3E%3C/svg%3E") center / contain no-repeat;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.7'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M3 12h18M12 3c2.5 2.7 3.8 5.7 3.8 9s-1.3 6.3-3.8 9c-2.5-2.7-3.8-5.7-3.8-9S9.5 5.7 12 3Z'/%3E%3C/svg%3E") center / contain no-repeat;
}
.tr-lang .tr-menu--lang > .wp-block-navigation__submenu-icon { display: none !important; }
.tr-menu--lang > .wp-block-navigation__submenu-container { left: auto !important; right: 0 !important; top: calc(100% + 12px) !important; border-radius: 16px !important; }
.tr-header .tr-menu--lang:hover > .wp-block-navigation__submenu-container,
.tr-header .tr-menu--lang:focus-within > .wp-block-navigation__submenu-container { min-width: 170px !important; padding: 6px 0; }
.tr-menu--lang .wp-block-navigation__submenu-container .wp-block-navigation-item__content { flex-direction: row !important; justify-content: space-between; align-items: center; border-radius: 0; font-weight: 400; color: var(--tr-body); }
.tr-menu--lang .wp-block-navigation__submenu-container .wp-block-navigation-item__label { font-weight: 400; }
.tr-menu--lang .wp-block-navigation__submenu-container .wp-block-navigation-item:first-child .wp-block-navigation-item__label { font-weight: 700; color: var(--tr-navy); }
.tr-menu--lang .wp-block-navigation-item__description { font-size: 11px; }

/* Search trigger and dialog */
.tr-search-open {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	height: 40px;
	width: 40px;
	padding: 0;
	border: 0;
	border-radius: 999px;
	background: transparent;
	color: var(--tr-body);
	font-weight: 500; font-size: 13px; line-height: 1;
	font-family: inherit;
	cursor: pointer;
	transition: background-color 0.15s, color 0.15s;
}
.tr-search-open__label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.tr-search-open kbd { display: none; margin-left: auto; border-radius: 6px; padding: 2px 6px; font-size: 11px; line-height: 1.4; font-family: inherit; background: #fff; color: var(--tr-muted-2); box-shadow: inset 0 0 0 1px rgba(34, 58, 117, 0.1); }
.tr-search-open:hover { background: rgba(34, 58, 117, 0.05); color: var(--tr-navy); }
.tr-header.is-dark .tr-search-open { color: rgba(255, 255, 255, 0.8); }
.tr-header.is-dark .tr-search-open:hover { background: rgba(255, 255, 255, 0.1); color: #fff; }
.tr-search { position: fixed; inset: 0; z-index: 65; pointer-events: auto; }
.tr-search[hidden] { display: none; }
.tr-search__backdrop { position: absolute; inset: 0; background: rgba(15, 27, 53, 0.32); backdrop-filter: blur(2px); animation: fade-in 0.2s ease-out; }
.tr-search__panel {
	position: absolute;
	left: 50%;
	top: calc(env(safe-area-inset-top) + 12px);
	width: min(680px, calc(100vw - 24px));
	transform: translateX(-50%);
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 0 20px;
	border-radius: 24px;
	background: #fff;
	color: var(--tr-muted-2);
	box-shadow: 0 40px 80px -30px rgba(15, 27, 53, 0.55);
	animation: panel-in 0.3s var(--tr-ease-expo);
}
@media (min-width: 768px) { .tr-search__panel { top: 84px; } }
.tr-search__panel input { flex: 1; min-width: 0; height: 64px; border: 0; background: transparent; outline: none; font-size: 17px; font-family: inherit; color: var(--tr-navy); }
.tr-search__panel input::placeholder { color: var(--tr-muted-2); }
.tr-search__panel button { flex: none; border: 0; border-radius: 6px; padding: 4px 8px; background: none; box-shadow: inset 0 0 0 1px var(--tr-line); font-weight: 600; font-size: 12px; font-family: inherit; color: var(--tr-muted-2); cursor: pointer; }

/* Mobile menu: core overlay below 1024px (core switches at 600px; we move it to the lg breakpoint). */
.tr-nav { order: 3; }
.tr-nav .wp-block-navigation__responsive-container-open {
	width: 44px;
	height: 44px;
	align-items: center;
	justify-content: center;
	border-radius: 999px;
	color: var(--tr-navy);
}
.tr-header.is-dark .tr-nav .wp-block-navigation__responsive-container-open { color: #fff; }
.tr-nav .wp-block-navigation__responsive-container-open svg { width: 22px; height: 22px; }
@media (min-width: 600px) and (max-width: 1023px) {
	.tr-nav .wp-block-navigation__responsive-container-open:not(.always-shown) { display: flex; }
	.tr-nav .wp-block-navigation__responsive-container:not(.hidden-by-default):not(.is-menu-open) { display: none; }
}
@media (min-width: 1024px) {
	.tr-nav { order: 0; }
	.tr-header__logo { margin-right: 0 !important; }
	.tr-header__bar { justify-content: space-between; }
}
.tr-nav .wp-block-navigation__responsive-container.is-menu-open {
	position: fixed;
	inset: 0;
	z-index: 40;
	padding: calc(env(safe-area-inset-top) + 84px) 20px calc(24px + env(safe-area-inset-bottom));
	background: rgba(255, 255, 255, 0.95) !important;
	-webkit-backdrop-filter: blur(40px);
	backdrop-filter: blur(40px);
	color: var(--tr-navy) !important;
	animation: sheet-in 0.45s var(--tr-ease-expo);
}
.tr-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content { padding-top: 0; align-items: stretch; }
.tr-nav .is-menu-open .wp-block-navigation__container { gap: 0 !important; align-items: stretch !important; width: 100%; }
.tr-nav .is-menu-open .wp-block-navigation__container > .wp-block-navigation-item { width: 100%; border-top: 1px solid var(--tr-line); border-radius: 0; padding: 8px 0; align-items: stretch !important; background: none !important; }
.tr-nav .is-menu-open .wp-block-navigation__container > .wp-block-navigation-item > .wp-block-navigation-item__content { padding: 8px 0 !important; font-size: 16px; font-weight: 600; color: var(--tr-navy); background: none !important; }
.tr-nav .is-menu-open .wp-block-navigation__container > .has-child > .wp-block-navigation-item__content { font-size: 12px; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase; color: var(--tr-muted-2); }
.tr-nav .is-menu-open .wp-block-navigation__submenu-icon { display: none !important; }
.tr-nav .is-menu-open .wp-block-navigation__submenu-container { display: grid !important; grid-template-columns: 1fr 1fr; gap: 4px 8px; width: 100% !important; padding: 0 !important; background: none !important; border: 0 !important; box-shadow: none !important; backdrop-filter: none !important; animation: none !important; }
.tr-nav .is-menu-open .wp-block-navigation__submenu-container .wp-block-navigation-item__content { padding: 8px 4px !important; border-top: 0 !important; background: none !important; }
.tr-nav .is-menu-open .wp-block-navigation__submenu-container .wp-block-navigation-item__label { font-size: 14px; }
/*
 * Mobile sheet: the two hub cards (name, then Ray's badge or Theta's note), then Solutions and Industries as
 * two-column lists without notes, under their underlined names (links to their pages).
 */
.tr-nav .is-menu-open .tr-menu--platform .wp-block-navigation__submenu-container { gap: 8px !important; }
.tr-nav .is-menu-open .tr-menu--platform .tr-menu__hub > .wp-block-navigation-item__content { padding: 16px !important; border-radius: 16px; background: linear-gradient(160deg, #f7f9fd, #eaf0fa) !important; }
.tr-nav .is-menu-open .tr-menu--platform .tr-menu__ray > .wp-block-navigation-item__content { background: linear-gradient(160deg, #f6fcff, #e6f5fd) !important; }
/* Solutions and Industries follow the hub cards without a divider (28 Oct design). */
.tr-nav .is-menu-open .wp-block-navigation__container > :is(.tr-menu--solutions, .tr-menu--industries) { border-top: 0; padding-top: 20px; }
.tr-nav .is-menu-open .tr-menu--platform .tr-menu__hub > .wp-block-navigation-item__content::before { display: none; }
.tr-nav .is-menu-open .tr-menu--platform .tr-menu__hub .wp-block-navigation-item__label { gap: 4px 8px; font-size: 15px; }
.tr-nav .is-menu-open .tr-menu--platform .tr-menu__hub .wp-block-navigation-item__label::before { width: 16px; height: 16px; }
.tr-nav .is-menu-open .tr-menu--platform .tr-menu__hub .wp-block-navigation-item__label em { flex-basis: 100%; margin: 0; padding: 0; box-shadow: none; background: none; font-size: 12.5px; font-weight: 400; line-height: 1.375; color: var(--tr-muted-2); white-space: normal; }
.tr-nav .is-menu-open .tr-menu--platform .tr-menu__ray .tr-menu__note { display: none; }
.tr-nav .is-menu-open .tr-menu--platform .tr-menu__note { margin-top: 0; font-size: 12.5px; font-weight: 400; color: var(--tr-muted-2); }
.tr-nav .is-menu-open :is(.tr-menu--platform, .tr-menu--industries, .tr-menu--solutions) .wp-block-navigation-item__description { display: none; }
.tr-nav .is-menu-open :is(.tr-menu--industries, .tr-menu--solutions) > .wp-block-navigation-item__content { color: var(--tr-blue-ink) !important; text-decoration: underline; text-decoration-color: rgba(26, 95, 196, 0.35); text-underline-offset: 4px; }
.tr-nav .is-menu-open :is(.tr-menu--industries, .tr-menu--solutions) .tr-menu__lead { display: none !important; }
.tr-nav .is-menu-open .tr-menu__lead { grid-column: 1 / -1; margin: 0 !important; }
.tr-nav .is-menu-open .tr-menu__lead > .wp-block-navigation-item__content { width: 100%; border-bottom: 1px solid var(--tr-line) !important; padding: 8px 4px 12px !important; }
/* While the sheet is open the glass bar stays on top (as on the site) and the menu button turns into a close button. */
.tr-nav .wp-block-navigation__responsive-container-close { display: none; }
.tr-header.is-menu-open .tr-header__bar::before { z-index: 41; box-shadow: 0 18px 40px -20px rgba(15, 27, 53, 0.35); }
.tr-header.is-menu-open .tr-header__logo, .tr-header.is-menu-open .tr-header__actions { z-index: 42; }
.tr-header.is-menu-open .tr-nav .wp-block-navigation__responsive-container-open { position: relative; z-index: 43; }
.tr-header.is-menu-open .tr-nav .wp-block-navigation__responsive-container-open svg { visibility: hidden; }
.tr-header.is-menu-open .tr-nav .wp-block-navigation__responsive-container-open::before {
	content: "";
	position: absolute;
	inset: 11px;
	background: currentColor;
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 24 24%27 fill=%27none%27 stroke=%27%23000%27 stroke-width=%272%27 stroke-linecap=%27round%27%3E%3Cpath d=%27M6 6l12 12M18 6 6 18%27/%3E%3C/svg%3E") center / contain no-repeat;
	mask: url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 24 24%27 fill=%27none%27 stroke=%27%23000%27 stroke-width=%272%27 stroke-linecap=%27round%27%3E%3Cpath d=%27M6 6l12 12M18 6 6 18%27/%3E%3C/svg%3E") center / contain no-repeat;
}
.tr-nav .is-menu-open .tr-menu__lead > .wp-block-navigation-item__content::after { display: none; }
/* "Get a demo" item: only in the mobile sheet (the bar has its own button). */
.tr-nav .tr-menu__demo { display: none !important; }
.tr-nav .is-menu-open .tr-menu__demo { display: flex !important; border-top: 0 !important; padding-top: 20px !important; }
.tr-nav .is-menu-open .wp-block-navigation__container > .tr-menu__demo > .wp-block-navigation-item__content { justify-content: center; align-items: center; text-align: center; width: 100%; min-height: 48px; border-radius: 999px; background: var(--tr-blue) !important; color: #fff !important; font-size: 15px !important; }

/* ======================================================================
   Hero
   ====================================================================== */
.tr-hero {
	min-height: 100svh;
	overflow: hidden;
	background: var(--tr-navy-900);
	color: #fff;
}
.tr-hero__media { position: absolute; inset: 0; overflow: hidden; will-change: transform; container-type: size; }
.tr-hero__poster { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transform: scale(1.18); }
/* The background video (self-hosted MP4, no controls), framed like the poster. It stays transparent until it is
   really playing (theme.js adds .is-playing), so a browser that blocks autoplay (iOS Low Power Mode) never shows its
   play button over the poster, which is the video's first frame. */
.tr-hero__video {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transform: scale(1.18);
	pointer-events: none;
	opacity: 0;
	transition: opacity 0.4s;
}
.tr-hero__video.is-playing { opacity: 1; }
.tr-hero__video::-webkit-media-controls,
.tr-hero__video::-webkit-media-controls-start-playback-button { display: none !important; -webkit-appearance: none; }
.tr-hero__shade { position: absolute; inset: 0; pointer-events: none; background: radial-gradient(ellipse 80% 70% at 50% 45%, rgba(15, 27, 53, 0.45), rgba(15, 27, 53, 0.86)); }
.tr-hero__fade { position: absolute; inset: auto 0 0; height: 192px; pointer-events: none; background: linear-gradient(to top, rgba(15, 27, 53, 0.8), transparent); }
.tr-hero__dim { position: absolute; inset: 0; background: var(--tr-navy-900); opacity: 0; pointer-events: none; }
.tr-hero__content {
	position: relative;
	max-width: 1180px;
	min-height: 100svh;
	margin-inline: auto;
	padding: 128px 20px 112px;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	text-align: center;
	will-change: transform, opacity;
}
@media (min-width: 768px) { .tr-hero__content { padding-inline: 48px; } }
body .tr-hero__title {
	margin: 0;
	font-size: clamp(48px, 9vw, 116px);
	font-weight: 300;
	line-height: 0.98;
	letter-spacing: -0.045em;
	text-wrap: balance;
	color: #fff;
}
/* inline-block for the line's fade-up; the extra bottom padding keeps descenders ("g") inside the gradient's
   background-clip box, which would otherwise end one line-height (0.98) down. */
.tr-hero__title strong { display: inline-block; padding-bottom: 0.12em; margin-bottom: -0.12em; }
body .tr-hero__sub {
	max-width: 680px;
	margin: 28px auto 0;
	font-size: 17px;
	font-weight: 300;
	line-height: 1.6;
	color: rgba(255, 255, 255, 0.8);
	text-wrap: pretty;
}
@media (min-width: 768px) { body .tr-hero__sub { margin-top: 36px; font-size: 21px; } }
.tr-hero__ctas { margin-top: 40px; justify-content: center; }
body .tr-hero__note { margin-top: 20px; font-size: 15px; font-weight: 600; color: #fff; text-shadow: 0 1px 14px rgba(0, 0, 0, 0.4); }
/* Load-time entrance: the headline, then its bold second line, then copy and button. */
.tr-hero__title { animation: fade-up 1.2s var(--tr-ease-expo) 80ms both; }
.tr-hero__title br + strong { animation: fade-up 1.2s var(--tr-ease-expo) 140ms both; }
.tr-hero__sub { animation: fade-up 1.2s var(--tr-ease-expo) 380ms both; }
.tr-hero__ctas, .tr-hero__note { animation: fade-up 1.2s var(--tr-ease-expo) 520ms both; }
.tr-scroll-cue {
	position: absolute;
	bottom: 64px;
	left: 50%;
	display: none;
	width: 24px;
	height: 40px;
	margin-left: -12px;
	border: 1px solid rgba(255, 255, 255, 0.4);
	border-radius: 999px;
	animation: fade-up 1.2s var(--tr-ease-expo) 1100ms both;
}
.tr-scroll-cue span { position: absolute; left: 50%; top: 8px; width: 2px; height: 8px; border-radius: 999px; background: rgba(255, 255, 255, 0.8); animation: cue 2s var(--tr-ease-expo) infinite; }
@media (min-width: 768px) { .tr-scroll-cue { display: block; } }

/* ======================================================================
   Logo marquees (customers, partners, analysts)
   ====================================================================== */
.tr-logos { background: var(--tr-surface); padding: 56px 20px 64px; }
@media (min-width: 768px) { .tr-logos { padding: 72px 48px 80px; } }
body .tr-logos__eyebrow { margin-bottom: 32px; text-align: center; font-size: 12px; font-weight: 600; letter-spacing: 0.2em; text-transform: uppercase; color: var(--tr-muted-2); }
.tr-marquee {
	overflow: hidden;
	padding-block: 10px;
	-webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
	mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
	flex-wrap: nowrap !important;
}
.tr-marquee__track {
	display: flex;
	align-items: center;
	gap: 64px;
	width: max-content;
	animation: tr-marquee 40s linear infinite;
}
.tr-logos--reverse .tr-marquee__track { animation-duration: 48s; animation-direction: reverse; }
.tr-marquee--sm .tr-marquee__track { gap: 56px; animation-duration: 36s; }
@media (min-width: 768px) { .tr-marquee__track, .tr-marquee--sm .tr-marquee__track { gap: 80px; } }
@media (hover: hover) { .tr-marquee:hover .tr-marquee__track { animation-play-state: paused; } }
.tr-marquee .tr-logo { flex: none; margin: 0; }
.tr-marquee .tr-logo img { display: block; height: 36px; width: auto; }
.tr-marquee--sm .tr-logo img { height: 32px; }
/* JS swaps each logo image for a navy silhouette with the same box. */
.tr-logo__mark {
	display: block;
	height: 32px;
	background: var(--tr-navy);
	opacity: 0.8;
	transition: opacity 0.3s;
	-webkit-mask: var(--src) center / contain no-repeat;
	mask: var(--src) center / contain no-repeat;
}
.tr-logo__mark:hover { opacity: 1; }
@media (min-width: 768px) { .tr-logo__mark { height: 36px; } }
.tr-marquee--sm .tr-logo__mark { height: 28px; }
@media (min-width: 768px) { .tr-marquee--sm .tr-logo__mark { height: 32px; } }
body .tr-logo--text { white-space: nowrap; font-size: 22px; font-weight: 600; letter-spacing: -0.02em; color: #4a5a7d; transition: color 0.3s; }
.tr-logo--text:hover { color: var(--tr-navy); }
@media (min-width: 768px) { body .tr-logo--text { font-size: 26px; } }

/* ======================================================================
   Statement
   ====================================================================== */
.tr-statement { overflow: hidden; background: #fff; padding: 96px 20px; }
@media (min-width: 768px) { .tr-statement { padding: 160px 48px; } }
.tr-statement__grid { display: grid; gap: 40px; }
@media (min-width: 768px) {
	.tr-statement__grid { grid-template-columns: minmax(0, 0.9fr) minmax(0, 2fr); gap: 64px; }
	.tr-statement__aside { position: sticky; top: 128px; align-self: start; }
}
.tr-statement__aside::before { content: ""; display: block; width: 48px; height: 4px; margin-bottom: 20px; border-radius: 999px; background: linear-gradient(90deg, #3888ff, #40a8f0); }
body .tr-statement__title { font-size: 22px; font-weight: 600; line-height: 1.25; letter-spacing: -0.02em; color: var(--tr-navy); }
@media (min-width: 768px) { body .tr-statement__title { font-size: 26px; } }
.tr-statement__aside .wp-block-buttons { margin-top: 32px; }
body .tr-statement__body { font-size: clamp(28px, 3.6vw, 48px); font-weight: 300; line-height: 1.22; letter-spacing: -0.03em; color: var(--tr-navy); text-wrap: pretty; }
.tr-scroll-words .tr-word { transition: opacity 0.1s linear; }

/* ======================================================================
   Outcomes (stats)
   ====================================================================== */
.tr-outcomes { overflow: hidden; padding: 96px 20px; background: linear-gradient(180deg, #ffffff 0%, #f3f7fe 45%, #fcf1f7 100%); }
@media (min-width: 768px) { .tr-outcomes { padding: 128px 48px; } }
.tr-outcomes::before, .tr-outcomes::after { content: ""; position: absolute; border-radius: 50%; filter: blur(40px); pointer-events: none; }
.tr-outcomes::before { left: -160px; top: 40px; width: 520px; height: 520px; background: radial-gradient(closest-side, rgba(56, 136, 255, 0.16), transparent); }
.tr-outcomes::after { right: -128px; bottom: 0; width: 560px; height: 560px; background: radial-gradient(closest-side, rgba(255, 37, 173, 0.1), transparent); }
.tr-outcomes > .tr-container { position: relative; z-index: 1; }
body .tr-outcomes__title { max-width: 820px; margin-bottom: 48px; font-size: clamp(34px, 5vw, 64px); line-height: 1.04; }
@media (min-width: 768px) { body .tr-outcomes__title { margin-bottom: 64px; } }
.tr-stats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
@media (min-width: 768px) { .tr-stats { gap: 16px; } }
@media (min-width: 1024px) { .tr-stats { grid-template-columns: repeat(5, minmax(0, 1fr)); } }
@media (max-width: 1023px) { .tr-stats > .tr-stat:last-child:nth-child(odd) { grid-column: span 2; } }
.tr-stat {
	--spot: rgba(255, 255, 255, 0.7);
	overflow: hidden;
	display: flex;
	flex-direction: column;
	padding: 28px 20px;
	border-radius: 24px;
	background: linear-gradient(160deg, #f1f6ff 0%, #e3edff 55%, #d8e6ff 100%);
	box-shadow: 0 1px 0 rgba(255, 255, 255, 0.95) inset, 0 24px 48px -30px rgba(26, 95, 196, 0.55), 0 0 0 1px rgba(56, 136, 255, 0.16);
}
@media (min-width: 768px) { .tr-stat { padding: 32px 24px; } }
.tr-stat::after { content: ""; position: absolute; right: -40px; top: -48px; width: 128px; height: 128px; border-radius: 50%; background: radial-gradient(closest-side, rgba(255, 255, 255, 0.9), transparent); pointer-events: none; }
body .tr-stat__value {
	position: relative;
	padding-right: 4px;
	white-space: nowrap;
	font-size: clamp(34px, 3.5vw, 50px);
	font-weight: 700;
	line-height: 1;
	letter-spacing: -0.045em;
	font-variant-numeric: tabular-nums;
	background: var(--tr-ink);
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
}
/* Italic text in a stat value is its unit ("10 *weeks**"): smaller, upright. */
.tr-stat__value em, .tr-stat__unit { font-size: 0.5em; font-style: normal; letter-spacing: -0.02em; }
body .tr-stat__label { position: relative; margin-top: 16px; font-size: 14px; font-weight: 500; line-height: 1.45; color: var(--tr-body); }
@media (min-width: 768px) { body .tr-stat__label { font-size: 15px; } }
body .tr-outcomes__note { margin-top: 24px; font-size: 13px; color: var(--tr-muted); }
@media (hover: hover) and (pointer: fine) {
	.tr-stat.tr-lift:hover { box-shadow: 0 1px 0 rgba(255, 255, 255, 0.9) inset, 0 30px 60px -24px rgba(15, 27, 53, 0.32), 0 0 0 1px rgba(56, 136, 255, 0.16); }
}

/* ======================================================================
   Platform tabs
   ====================================================================== */
/* clip, not hidden: a hidden box can still be scrolled sideways by script, which hid the panel on phones (round 12). */
.tr-platform { overflow: hidden; overflow: clip; padding: 96px 20px; background: linear-gradient(180deg, #f5f8fd, #eef3fb 40%, #f7f9fd); }
@media (min-width: 768px) { .tr-platform { padding: 144px 48px; } }
.tr-platform::before {
	content: "";
	position: absolute;
	left: 50%;
	top: 0;
	width: 1100px;
	height: 520px;
	transform: translateX(-50%);
	border-radius: 50%;
	filter: blur(64px);
	pointer-events: none;
	background: radial-gradient(closest-side, rgba(var(--tab-rgb, 34, 58, 117), 0.16), transparent);
	transition: background 0.7s;
}
.tr-platform > .tr-container { position: relative; }
.tr-platform__intro { max-width: 900px; margin-inline: auto; text-align: center; }
body .tr-platform__title { margin: 20px 0 24px; font-size: clamp(36px, 5.6vw, 72px); line-height: 1.02; letter-spacing: -0.045em; }
.tr-platform__card { margin-top: 56px; overflow: hidden; overflow: clip; border-radius: 32px; }
@media (min-width: 768px) { .tr-platform__card { margin-top: 80px; } }
body .tr-platform__closing { margin-top: 56px; text-align: center; font-size: 24px; font-weight: 300; line-height: 1.3; letter-spacing: -0.03em; color: var(--tr-navy); }
@media (min-width: 768px) { body .tr-platform__closing { font-size: 34px; } }

/* Labels the script turns into the Ray and Theta rows. Without JS they read as small captions. */
.tr-platform__ray-label, .tr-platform__theta-label { padding: 16px 20px 0; font-size: 16px; font-weight: 700; color: var(--tr-blue-ink); }
.tr-platform__theta-label { color: var(--tr-navy); }
.tr-platform__all-note, .tr-platform__ray-note, .tr-platform__theta-note { padding: 0 20px 8px; font-size: 13px; color: var(--tr-muted); }
/* The Close button's label: only theme.js uses it. */
.tr-platform__close-label { display: none; }
.tr-platform.is-enhanced :is(.tr-platform__ray-label, .tr-platform__theta-label, .tr-platform__all-note, .tr-platform__ray-note, .tr-platform__theta-note) { display: none; }

.tr-ptab { display: grid; gap: 32px; padding: 32px 20px; border-top: 1px solid rgba(34, 58, 117, 0.07); }
.tr-ptab__agent, .tr-ptool { display: grid; gap: 32px; grid-column: 1 / -1; padding: 32px 20px; border-radius: 24px; background: linear-gradient(160deg, #fbfeff, #f1fafe); }
@media (min-width: 768px) {
	.tr-ptab, .tr-ptab__agent, .tr-ptool { grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); align-items: center; gap: 56px; padding: 48px 40px; }
}
.tr-ptab__copy::before {
	content: "";
	display: block;
	width: 40px;
	height: 40px;
	margin-bottom: 20px;
	background: linear-gradient(150deg, var(--hue), var(--hue-ink));
	-webkit-mask: var(--tr-theta-icon) center / contain no-repeat;
	mask: var(--tr-theta-icon) center / contain no-repeat;
	filter: drop-shadow(0 8px 16px rgba(15, 27, 53, 0.18));
}
:is(.tr-ptab__agent, .tr-ptool) .tr-ptab__copy::before { background: var(--tr-ray-icon) center / contain no-repeat; -webkit-mask: none; mask: none; }
body .tr-ptab__name { margin-bottom: 16px; font-size: 28px; font-weight: 600; line-height: 1.5; letter-spacing: -0.03em; color: var(--tr-navy); }
@media (min-width: 768px) { body .tr-ptab__name { font-size: 40px; } }
body .tr-ptab__body { margin-bottom: 28px; font-size: 17px; font-weight: 300; line-height: 1.65; color: var(--tr-body); text-wrap: pretty; }
:is(.tr-ptab__agent, .tr-ptool) .tr-ptab__body { margin-bottom: 36px; }
@media (min-width: 768px) { body .tr-ptab__body { font-size: 18px; } }
body .tr-ptab__bullet { position: relative; margin-bottom: 36px; padding-left: 18px; font-size: 15px; font-weight: 500; line-height: 1.55; color: var(--tr-navy); }
.tr-ptab__bullet::before { content: ""; position: absolute; left: 0; top: 8px; width: 6px; height: 6px; border-radius: 50%; background: var(--tr-pink); }
/* The site sets this button inline, so its line box adds a few pixels of descender space below it. */
.tr-ptab__copy > .wp-block-buttons { margin-bottom: 7px; }
.tr-ptab__media { position: relative; }
.tr-ptab__media::before {
	content: "";
	position: absolute;
	inset: -24px;
	border-radius: 36px;
	filter: blur(40px);
	background: radial-gradient(closest-side, rgba(var(--hue-rgb), 0.22), transparent);
}
:is(.tr-ptab__agent, .tr-ptool) .tr-ptab__media::before { background: radial-gradient(closest-side, rgba(96, 216, 255, 0.18), transparent); }
.tr-ptab__media > .tr-visual {
	position: relative;
	overflow: hidden;
	border-radius: 24px;
	background-color: #fff;
	box-shadow: 0 40px 80px -40px rgba(15, 27, 53, 0.5), 0 0 0 1px rgba(0, 0, 0, 0.05);
}
.tr-ptab > .tr-ptab__media > .tr-visual { min-height: 260px; }
@media (min-width: 768px) { .tr-ptab > .tr-ptab__media > .tr-visual { min-height: 340px; } }

/* Enhanced (script) layout: Ray band, optional agent panel, Theta row, tablist, one visible tab. */
.tr-platform.is-enhanced .tr-ptab { display: none; border: 0; }
.tr-platform.is-enhanced .tr-ptab.is-active { display: grid; animation: tab-in 0.45s var(--tr-ease-expo); }
.tr-platform.is-enhanced :is(.tr-ptab__agent, .tr-ptool) { display: none; }
.tr-ray-band {
	display: grid;
	gap: 12px;
	padding: 16px 20px;
	background: linear-gradient(90deg, rgba(var(--tab-rgb), 0.12), rgba(var(--tab-rgb), 0.03));
	transition: background 0.5s;
}
.tr-ray-band.is-all { background: linear-gradient(90deg, rgba(56, 136, 255, 0.1), rgba(56, 136, 255, 0.03)); }
@media (min-width: 768px) { .tr-ray-band { padding: 20px 32px; } }
.tr-ray-band__top { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; min-height: 36px; }
.tr-ray-band__lead, .tr-ray-band__agents { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; min-width: 0; }
.tr-ray-band__agents { gap: 8px; }
.tr-ray-band__close { display: inline-flex; align-items: center; gap: 6px; min-height: 36px; padding: 6px 14px; border: 0; border-radius: 999px; background: var(--tr-navy); color: #fff; font: inherit; font-size: 13px; font-weight: 600; line-height: 1; white-space: nowrap; cursor: pointer; transition: background-color 0.2s; }
.tr-ray-band__close:hover { background: var(--tr-blue-ink); }
.tr-ray-band__icon, .tr-theta-row__icon { width: 22px; height: 22px; flex: none; background: var(--tr-ray-icon) center / contain no-repeat; }
.tr-theta-row__icon { background-image: var(--tr-theta-icon); }
.tr-ray-band__label, .tr-theta-row__label { font-size: 16px; font-weight: 700; letter-spacing: -0.01em; color: var(--tr-blue-ink); }
.tr-theta-row__label { color: var(--tr-navy); }
.tr-ray-band__note, .tr-theta-row__note { font-size: 13px; color: var(--tr-muted); }
.tr-agent-pill {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	min-height: 36px;
	padding: 6px 14px;
	border: 0;
	border-radius: 999px;
	background: rgba(255, 255, 255, 0.6);
	color: var(--hue-ink);
	font-weight: 700; font-size: 13px; line-height: 1;
	font-family: inherit;
	white-space: nowrap;
	cursor: pointer;
	box-shadow: 0 0 0 1px rgba(var(--hue-rgb), 0.3);
	transition: background-color 0.3s, box-shadow 0.3s;
}
.tr-agent-pill:hover { background: #fff; }
/* The active product's agent. */
.tr-agent-pill.is-current { background: #fff; box-shadow: 0 4px 14px -6px rgba(15, 27, 53, 0.3), 0 0 0 2px rgba(var(--hue-rgb), 0.55); }
.tr-agent-pill svg { transition: transform 0.5s var(--tr-ease-expo); }
.tr-agent-pill[aria-expanded="true"] svg { transform: rotate(180deg); }
.tr-ray-panel {
	display: grid;
	grid-template-rows: 0fr;
	opacity: 0;
	overflow: hidden;
	background: linear-gradient(160deg, #fbfeff, #f1fafe);
	transition: grid-template-rows 0.5s var(--tr-ease-expo), opacity 0.5s var(--tr-ease-expo);
	border-bottom: 0 solid rgba(34, 58, 117, 0.07);
}
.tr-ray-panel.is-open { grid-template-rows: 1fr; opacity: 1; border-bottom-width: 1px; }
.tr-ray-panel > div { min-height: 0; }
.tr-ray-panel :is(.tr-ptab__agent, .tr-ptool) { display: none; background: none; border-radius: 0; }
.tr-ray-panel :is(.tr-ptab__agent, .tr-ptool).is-active { display: grid; animation: tab-in 0.4s var(--tr-ease-expo); }
/* Ray tool buttons in the band (Ray Regulatory Reporting, Ray Case Manager). */
.tr-ray-band__tools { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.tr-tool-pill { display: inline-flex; align-items: center; gap: 6px; min-height: 36px; padding: 6px 14px; border: 0; border-radius: 999px; background: rgba(255, 255, 255, 0.6); box-shadow: 0 0 0 1px rgba(64, 168, 240, 0.3); font: inherit; font-size: 13px; font-weight: 600; white-space: nowrap; color: var(--tr-blue-ink); cursor: pointer; transition: background-color 0.2s, box-shadow 0.2s; }
.tr-tool-pill:hover { background: #fff; }
.tr-tool-pill[aria-expanded="true"] { background: #fff; box-shadow: 0 4px 14px -6px rgba(15, 27, 53, 0.3), 0 0 0 1px rgba(64, 168, 240, 0.6); }
.tr-tool-pill__icon { width: 14px; height: 14px; flex: none; background: var(--tr-ray-icon) center / contain no-repeat; }
.tr-theta-row { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; padding: 16px 20px; border-block: 1px solid rgba(34, 58, 117, 0.07); }
@media (min-width: 768px) { .tr-theta-row { padding-inline: 32px; } }
.tr-tablist-wrap { padding: 16px 12px 0; }
@media (min-width: 768px) { .tr-tablist-wrap { padding: 24px 24px 0; } }
.tr-tablist { position: relative; display: flex; gap: 4px; overflow-x: auto; padding: 6px; border-radius: 999px; background: var(--tr-surface-2); scrollbar-width: none; }
.tr-tablist::-webkit-scrollbar { display: none; }
.tr-tab {
	position: relative;
	z-index: 1;
	display: flex;
	flex: 1;
	align-items: center;
	justify-content: center;
	gap: 6px;
	min-height: 44px;
	padding: 0 14px;
	border: 0;
	border-radius: 999px;
	background: none;
	color: var(--tr-muted);
	font-weight: 600; font-size: 14px; line-height: 1;
	font-family: inherit;
	white-space: nowrap;
	cursor: pointer;
	transition: color 0.3s;
}
.tr-tab:hover, .tr-tab[aria-selected="true"] { color: var(--tr-navy); }
.tr-tab .tr-brand-icon { opacity: 0.75; transition: transform 0.3s, opacity 0.3s; }
.tr-tab[aria-selected="true"] .tr-brand-icon { opacity: 1; transform: scale(1.15); }
@media (min-width: 1280px) { .tr-tab { padding: 0 16px; font-size: 15px; } }
.tr-tab-pill {
	position: absolute;
	z-index: 0;
	top: 6px;
	left: 0;
	height: 44px;
	border-radius: 999px;
	background: #fff;
	box-shadow: 0 6px 18px -8px rgba(15, 27, 53, 0.35);
	transition: transform 0.5s var(--tr-ease-expo), width 0.5s var(--tr-ease-expo);
}
.tr-platform.is-enhanced .tr-ptabs { position: relative; }

/* ======================================================================
   Customer stories (video testimonials)
   ====================================================================== */
.tr-stories { overflow: hidden; background: #fff; padding: 96px 20px; }
@media (min-width: 768px) { .tr-stories { padding: 128px 48px; } }
.tr-stories__head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 32px; margin-bottom: 48px; }
.tr-stories__intro { min-width: 0; max-width: 700px; }
body .tr-stories__title { margin: 16px 0; font-size: clamp(34px, 5vw, 60px); }
.tr-stories .tr-lead { line-height: 1.6; }
.tr-videos { display: flex; gap: 16px; margin-inline: -20px; padding: 0 20px 16px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; }
.tr-videos::-webkit-scrollbar { display: none; }
@media (min-width: 1024px) {
	/* A carousel since 28 Oct: five cards in view, the rest one previous / next away (theme.js adds the buttons). */
	.tr-videos { gap: 20px; margin: 0 0 -48px; padding: 4px 0 64px; overflow-x: auto; scroll-padding-inline: 0; }
	.tr-videos > .tr-video { flex: none; width: calc((100% - 80px) / 5); }
	.tr-carousel-nav { display: flex; justify-content: flex-end; gap: 8px; margin-top: 16px; }
}
.tr-carousel-nav { display: none; }
.tr-carousel-nav[hidden] { display: none !important; }
.tr-carousel-nav button { display: flex; align-items: center; justify-content: center; width: 44px; height: 44px; padding: 0; border: 0; border-radius: 50%; background: #fff; color: var(--tr-navy); box-shadow: 0 10px 24px -12px rgba(15, 27, 53, 0.45), 0 0 0 1px rgba(34, 58, 117, 0.1); cursor: pointer; transition: opacity 0.3s, transform 0.3s; }
.tr-carousel-nav button:hover { transform: scale(1.05); }
.tr-carousel-nav button:disabled { opacity: 0; pointer-events: none; }
@media (max-width: 1023px) {
	.tr-carousel-nav { display: none !important; }
}
.tr-video {
	--spot: transparent;
	position: relative;
	flex: none;
	width: 68vw;
	max-width: 280px;
	aspect-ratio: 9 / 16;
	overflow: hidden;
	scroll-snap-align: start;
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	gap: 4px;
	padding: 96px 20px 20px;
	border-radius: 28px;
	background: var(--tr-navy-900);
	box-shadow: 0 30px 60px -28px rgba(15, 27, 53, 0.55), 0 0 0 1px rgba(0, 0, 0, 0.05);
	isolation: isolate;
	transition: transform 0.5s var(--tr-ease-expo), box-shadow 0.5s var(--tr-ease-expo), opacity 0.9s var(--tr-ease-expo) var(--reveal-delay, 0ms), filter 0.9s var(--tr-ease-expo) var(--reveal-delay, 0ms);
}
@media (min-width: 1024px) { .tr-video { width: auto; max-width: none; } }
@media (hover: hover) and (pointer: fine) {
	.tr-video.is-visible:hover { transform: translateY(-4px); box-shadow: 0 30px 60px -24px rgba(15, 27, 53, 0.32); }
}
/* Caption shade: starts 96px above the name and runs past the card bottom (clipped), like the site. */
.tr-video__name::after {
	content: "";
	position: absolute;
	inset: -96px -20px -100px;
	z-index: -1;
	pointer-events: none;
	background: linear-gradient(180deg, transparent 0, rgba(15, 27, 53, 0.75) 86px, var(--tr-navy-900) 128px);
}
.tr-video.is-playing > p { display: none; }
.tr-video__thumb { position: absolute !important; inset: 0; }
.tr-video__thumb a { position: absolute; inset: 0; display: block; overflow: hidden; }
.tr-video__thumb img { position: absolute; inset: 0; width: 100% !important; height: 100% !important; object-fit: cover; transition: transform 0.6s var(--tr-ease-out); }
.tr-video--zoom .tr-video__thumb img { object-position: 78% center; transform: scale(1.28); }
.tr-video__thumb a::before { content: ""; position: absolute; inset: 0; z-index: 1; background: linear-gradient(180deg, rgba(15, 27, 53, 0.18), rgba(15, 27, 53, 0.05) 45%, rgba(15, 27, 53, 0.35)); }
.tr-video__thumb a::after {
	content: "";
	position: absolute;
	z-index: 3;
	left: 50%;
	top: 50%;
	width: 64px;
	height: 64px;
	margin: -32px 0 0 -32px;
	border: 1px solid rgba(255, 255, 255, 0.5);
	border-radius: 50%;
	background:
		url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 15 18'%3E%3Cpath d='M0 0l15 9-15 9z' fill='%23fff'/%3E%3C/svg%3E") 54% 50% / 15px 18px no-repeat,
		rgba(255, 255, 255, 0.2);
	-webkit-backdrop-filter: blur(12px);
	backdrop-filter: blur(12px);
	box-shadow: 0 10px 30px rgba(15, 27, 53, 0.35);
	transition: transform 0.5s var(--tr-ease-expo);
}
.tr-video:hover .tr-video__thumb a::after { transform: scale(1.1); }
.tr-video iframe { position: absolute; inset: 0; z-index: 4; width: 100%; height: 100%; border: 0; }
.tr-video > p { position: relative; z-index: 2; pointer-events: none; }
.tr-video__role { z-index: 3 !important; }
body .tr-video__name { font-size: 15px; font-weight: 600; color: #fff; }
.tr-video__name::before { content: ""; display: block; width: 32px; height: 2px; margin-bottom: 10px; border-radius: 999px; background: var(--hue); }
body .tr-video__role { font-size: 12px; line-height: 1.4; color: rgba(255, 255, 255, 0.7); }

/* ======================================================================
   Meet Ray
   ====================================================================== */
.tr-meet { overflow: hidden; padding: 96px 20px; background: linear-gradient(180deg, #f7f4fb, #f5f8fd); }
@media (min-width: 768px) { .tr-meet { padding: 144px 48px; } }
.tr-meet::before { content: ""; position: absolute; right: -160px; top: 40px; width: 600px; height: 600px; border-radius: 50%; filter: blur(40px); pointer-events: none; background: radial-gradient(closest-side, rgba(64, 168, 240, 0.18), transparent); }
.tr-meet__grid { position: relative; display: grid; align-items: start; gap: 56px; }
@media (min-width: 768px) {
	.tr-meet__grid { grid-template-columns: 1fr 1fr; gap: 80px; }
	.tr-meet__aside { position: sticky; top: 144px; }
}
body .tr-meet__title { margin: 20px 0 24px; font-size: clamp(38px, 5.6vw, 68px); line-height: 1.02; letter-spacing: -0.045em; }
body .tr-meet__body { margin-bottom: 36px; font-size: 17px; }
@media (min-width: 768px) { body .tr-meet__body { font-size: 18px; } }
.tr-case {
	padding: 20px;
	border-radius: 32px;
	background: rgba(255, 255, 255, 0.72);
	-webkit-backdrop-filter: blur(22px) saturate(180%);
	backdrop-filter: blur(22px) saturate(180%);
	border: 1px solid rgba(255, 255, 255, 0.6);
	box-shadow: 0 40px 80px -40px rgba(15, 27, 53, 0.45);
}
@media (min-width: 768px) { .tr-case { padding: 32px; } }
.tr-case__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 24px; }
body .tr-case__label { display: flex; align-items: center; gap: 10px; font-size: 13px; font-weight: 600; color: var(--tr-navy); }
.tr-case__label::before { content: ""; width: 20px; height: 20px; background: var(--tr-ray-icon) center / contain no-repeat; }
body .tr-case__live { display: flex; align-items: center; gap: 6px; font-size: 11px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--tr-ray-ink); }
.tr-case__live::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--tr-ray); animation: tr-pulse 1.6s infinite; }
.tr-steps { --progress: 1; --step: #40a8f0; --step-ink: #1a73b8; position: relative; display: grid; gap: 14px; counter-reset: tr-step; }
.tr-steps::before, .tr-steps::after { content: ""; position: absolute; z-index: 0; left: 15px; top: 24px; bottom: 24px; width: 2px; border-radius: 999px; background: rgba(34, 58, 117, 0.1); }
.tr-steps::after { background: linear-gradient(180deg, var(--step), var(--step-ink)); transform-origin: top; transform: scaleY(var(--progress)); }
.tr-step { --o: 1; --x: 0px; --fill: 0; position: relative; z-index: 1; margin-left: 48px; padding: 15px 17px; counter-increment: tr-step; isolation: isolate; }
.tr-step::before {
	content: counter(tr-step);
	position: absolute;
	z-index: 2;
	left: -48px;
	top: 12px;
	width: 32px;
	height: 32px;
	display: flex;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
	border: 2px solid var(--step);
	border-radius: 50%;
	background: color-mix(in srgb, var(--step) calc(var(--fill) * 100%), #fff);
	color: var(--step-ink);
	font-size: 12px;
	font-weight: 700;
}
.tr-step::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	border: 1px solid rgba(34, 58, 117, 0.08);
	border-radius: 16px;
	background: #fff;
	box-shadow: 0 1px 0 rgba(255, 255, 255, 0.8) inset, 0 10px 30px -12px rgba(15, 27, 53, 0.18);
}
.tr-step::after, .tr-step > * { opacity: var(--o); transform: translateX(var(--x)); }
body .tr-step__title { margin-bottom: 4px; font-size: 14px; font-weight: 600; line-height: 1.5; color: var(--tr-navy); }
body .tr-step__body { font-size: 13px; line-height: 1.5; color: var(--tr-body-3); }

/* ======================================================================
   Analysts
   ====================================================================== */
.tr-analysts { background: #fff; padding: 64px 20px; }
@media (min-width: 768px) { .tr-analysts { padding: 80px 48px; } }
.tr-analysts__card { max-width: 1180px; margin-inline: auto; overflow: hidden; padding: 36px 0; border: 1px solid var(--tr-line); border-radius: 28px; background: var(--tr-surface); }
@media (min-width: 768px) { .tr-analysts__card { padding: 44px 0; } }
body .tr-analysts__title { margin-bottom: 32px; padding: 0 28px; text-align: center; font-size: 20px; font-weight: 300; line-height: 1.5; letter-spacing: -0.02em; color: var(--tr-body); }
@media (min-width: 768px) { body .tr-analysts__title { margin-bottom: 36px; font-size: 24px; } }

/* ======================================================================
   Resources
   ====================================================================== */
.tr-resources { background: #fff; padding: 32px 20px 96px; }
@media (min-width: 768px) { .tr-resources { padding: 32px 48px 128px; } }
.tr-resources__head { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; margin-bottom: 40px; }
@media (min-width: 768px) { .tr-resources__head { margin-bottom: 48px; } }
.tr-resources__head h2 { font-size: clamp(34px, 5vw, 60px); }
body .tr-text-link { white-space: nowrap; font-size: 15px; font-weight: 600; line-height: 1.5; color: var(--tr-navy); }
.tr-cards { display: grid; gap: 16px; }
@media (min-width: 768px) { .tr-cards { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; } }
.tr-card {
	--tone: #3888ff;
	--tone-2: #9b4090;
	--kind: #1a5fc4;
	position: relative;
	display: flex;
	flex-direction: column;
	overflow: hidden;
	padding: 140px 28px 28px;
	border-radius: 28px;
	color: var(--tr-navy-900);
	background:
		linear-gradient(135deg, color-mix(in srgb, var(--tone) 15%, transparent), color-mix(in srgb, var(--tone-2) 8%, transparent) 60%, transparent) top / 100% 112px no-repeat,
		#fff;
}
.tr-card--purple { --tone: #9b4090; --tone-2: #ff25ad; --kind: #9b4090; }
.tr-card--pink { --tone: #ff25ad; --tone-2: #3888ff; --kind: #c40080; }
.tr-card { --spot: color-mix(in srgb, var(--tone) 13%, transparent); }
.tr-card::after {
	content: "";
	position: absolute;
	inset: 0 0 auto;
	height: 112px;
	pointer-events: none;
	background: radial-gradient(circle 64px at calc(100% - 40px) 88px, color-mix(in srgb, var(--tone) 35%, transparent), transparent);
	background-size: 100% 100%;
	filter: blur(28px);
	clip-path: inset(0);
	transition: background-size 0.7s var(--tr-ease-expo);
}
.tr-card:hover::after { background: radial-gradient(circle 80px at calc(100% - 40px) 88px, color-mix(in srgb, var(--tone) 35%, transparent), transparent); }
body .tr-card__kind { font-size: 11px; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase; color: var(--kind); }
body .tr-card__title { margin: 12px 0; font-size: 20px; font-weight: 600; line-height: 1.28; letter-spacing: -0.015em; color: inherit; }
.tr-card__title a { color: inherit; }
.tr-card__title a::after { content: ""; position: absolute; inset: 0; z-index: 3; }
body .tr-card__blurb { display: flex; flex: 1; flex-direction: column; font-size: 14px; font-weight: 300; line-height: 1.6; color: var(--tr-body-2); }
.tr-card__blurb::after { content: "→"; align-self: flex-start; margin-top: auto; padding-top: 24px; font-size: 14px; font-weight: 600; line-height: 1.5; color: var(--tr-blue-ink); transition: transform 0.4s var(--tr-ease-expo); }

/* ======================================================================
   FAQ
   ====================================================================== */
.tr-faq { background: #fff; padding: 96px 20px; }
@media (min-width: 768px) { .tr-faq { padding: 128px 48px; } }
.tr-faq__grid { display: grid; gap: 40px; }
@media (min-width: 768px) {
	.tr-faq__grid { grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); gap: 64px; }
	.tr-faq__aside { position: sticky; top: 128px; align-self: start; }
}
body .tr-faq__aside > h2.wp-block-heading { margin-top: 12px; font-size: clamp(34px, 4.6vw, 56px); }
.tr-faq__list { display: grid; gap: 12px; }
.tr-faq__item { padding: 0 24px; border-radius: 22px; transition: box-shadow 0.3s; }
.tr-faq__item[open] { box-shadow: 0 30px 60px -30px rgba(15, 27, 53, 0.35); }
.tr-faq__item summary {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 24px;
	min-height: 64px;
	padding: 20px 0;
	list-style: none;
	cursor: pointer;
	font-size: 16px;
	font-weight: 600;
	line-height: 1.5;
	color: var(--tr-navy);
}
.tr-faq__item summary::-webkit-details-marker { display: none; }
.tr-faq__item summary::after {
	content: "+";
	flex: none;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 32px;
	height: 32px;
	border-radius: 50%;
	background: var(--tr-surface-2);
	color: var(--tr-blue-ink);
	font-size: 18px;
	line-height: 1;
	transition: transform 0.5s var(--tr-ease-expo);
}
.tr-faq__item[open] summary::after { transform: rotate(45deg); }
@media (min-width: 768px) { .tr-faq__item summary { font-size: 17px; } }
body .tr-faq__item p { padding: 0 40px 24px 0; font-size: 15px; font-weight: 300; line-height: 1.7; color: var(--tr-body); text-wrap: pretty; animation: fade-up 0.6s var(--tr-ease-expo); }

/* ======================================================================
   Careers band
   ====================================================================== */
.tr-careers { background: #fff; padding: 0 20px 24px; }
@media (min-width: 768px) { .tr-careers { padding: 0 48px 24px; } }
.tr-careers__card {
	--spot: rgba(56, 136, 255, 0.12);
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 32px;
	overflow: hidden;
	padding: 48px 28px;
	border-radius: 32px;
	background: linear-gradient(120deg, #eef3fb, #f5f8fd 55%, #eaf6fe);
}
@media (min-width: 768px) { .tr-careers__card { gap: 40px; padding: 64px 56px; } }
.tr-careers__copy { flex: 1 1 560px; min-width: 0; }
body .tr-careers__title { margin-bottom: 12px; font-size: clamp(28px, 3.4vw, 44px); font-weight: 300; line-height: 1.08; letter-spacing: -0.035em; color: var(--tr-navy); text-wrap: balance; }
body .tr-careers__body { font-size: 16px; line-height: 1.6; color: #4a6a96; }
@media (min-width: 768px) { body .tr-careers__body { font-size: 17px; } }
@media (max-width: 639px) {
	.tr-careers__card .wp-block-buttons, .tr-careers__card .wp-block-button, .tr-careers__card .wp-block-button__link { width: 100%; }
}

/* ======================================================================
   Demo call to action
   ====================================================================== */
.tr-cta { background: #fff; padding: 24px 12px 12px; }
@media (min-width: 768px) { .tr-cta { padding: 24px 20px 20px; } }
.tr-cta__card { position: relative; isolation: isolate; overflow: hidden; padding: 96px 20px; border-radius: 32px; background: var(--tr-navy-900); color: #fff; text-align: center; }
@media (min-width: 768px) { .tr-cta__card { padding: 144px 48px; border-radius: 44px; } }
.tr-cta__inner { position: relative; max-width: 900px; margin-inline: auto; }
.tr-cta__icon { margin: 0 auto 32px !important; width: 56px; }
.tr-cta__icon img { display: block; filter: drop-shadow(0 10px 30px rgba(64, 168, 240, 0.6)); }
body .tr-cta__title { margin-bottom: 20px; font-size: clamp(36px, 6vw, 80px); font-weight: 300; line-height: 1.02; letter-spacing: -0.045em; color: #fff; text-wrap: balance; }
body .tr-cta__body { margin-bottom: 40px; font-size: 17px; font-weight: 300; color: rgba(255, 255, 255, 0.75); }
@media (min-width: 768px) { body .tr-cta__body { font-size: 20px; } }
.tr-cta__buttons { justify-content: center; }

/* ======================================================================
   Footer
   ====================================================================== */
.tr-footer { background: #fff; padding: 64px 20px calc(32px + env(safe-area-inset-bottom)); }
@media (min-width: 768px) { .tr-footer { padding-inline: 48px; padding-top: 96px; } }
.tr-footer__top { max-width: 1180px; margin-inline: auto; display: grid; gap: 48px; }
@media (min-width: 1024px) { .tr-footer__top { grid-template-columns: minmax(0, 1fr) minmax(0, 2.4fr); gap: 64px; } }
.tr-footer__brand { display: flex; flex-direction: column; gap: 16px; }
.tr-footer__brand img { display: block; height: 24px !important; width: auto !important; }
.tr-footer .tr-footer__tagline { max-width: 300px; font-size: 14px; font-weight: 300; line-height: 1.625; color: var(--tr-muted-2); }
.tr-footer__cols { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 40px 24px; }
@media (min-width: 640px) { .tr-footer__cols { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .tr-footer__cols { grid-template-columns: repeat(6, minmax(0, 1fr)); } .tr-footer__cols--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } .tr-footer__cols--5 { grid-template-columns: repeat(5, minmax(0, 1fr)); } }
/* A footer link with a note (Platform): the label in bold navy, the note under it. */
.tr-footer__links a strong { font-weight: 600; color: var(--tr-navy); }
.tr-footer__note { display: block; margin-top: 2px; font-size: 12px; color: var(--tr-muted-2); transition: color 0.3s; }
.tr-footer__links a:hover .tr-footer__note { color: var(--tr-navy); }
.tr-footer .tr-footer__heading { margin-bottom: 16px; font-size: 11px; font-weight: 700; line-height: 1.5; letter-spacing: 0.16em; text-transform: uppercase; color: var(--tr-navy); }
.tr-footer__links { display: grid; gap: 12px; margin: 0; padding: 0; list-style: none; }
.tr-footer__links a { display: block; font-size: 13px; font-weight: 300; line-height: 1.5; color: var(--tr-muted-2); transition: color 0.3s; }
.tr-footer__links li { line-height: 1.5; }
.tr-footer__links a:hover, .tr-footer__legal a:hover { color: var(--tr-navy); }
.tr-footer__bottom { max-width: 1180px; margin: 64px auto 0; display: flex; flex-wrap: wrap; justify-content: space-between; gap: 20px; padding-top: 24px; border-top: 1px solid rgba(34, 58, 117, 0.08); font-size: 12px; font-weight: 300; line-height: 1.5; color: #6b7894; }
.tr-footer .tr-footer__legal { display: flex; gap: 24px; }

/* Generic pages (page.html, index.html) */
.tr-page .wp-block-post-content > * + * { margin-top: 1.25em; }
.tr-page { padding: 140px 20px 96px; min-height: 60vh; }
.tr-page__title { margin-bottom: 32px; font-size: clamp(34px, 5vw, 60px); letter-spacing: -0.04em; }

/* ---------- Product visual loops (shared 12s timeline, delays set per element) ---------- */
.pv-rise, .pv-pop, .pv-draw, .pv-fade, .pv-sweep, .pv-drop, .pv-ring {
	animation-duration: 12s;
	animation-iteration-count: infinite;
	animation-fill-mode: both;
	animation-timing-function: var(--tr-ease-expo);
}
.pv-rise { animation-name: pv-rise; }
.pv-pop { animation-name: pv-pop; animation-timing-function: cubic-bezier(0.2, 1.4, 0.4, 1); }
.pv-draw { animation-name: pv-draw; }
.pv-fade { animation-name: pv-fade; }
.pv-sweep { animation-name: pv-sweep; }
.pv-drop { animation-name: pv-drop; animation-timing-function: cubic-bezier(0.3, 1.5, 0.5, 1); }
.pv-ring { animation-name: pv-ring; animation-timing-function: ease-out; }

/* ---------- Keyframes ---------- */
@keyframes tr-marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@keyframes tr-pulse { 0%, 100% { opacity: 0.35; } 50% { opacity: 1; } }
@keyframes tr-ring { 0% { transform: scale(1); opacity: 0.55; } 70%, 100% { transform: scale(2.1); opacity: 0; } }
@keyframes aurora-drift {
	0% { transform: translate3d(0, 0, 0) scale(1); }
	50% { transform: translate3d(6%, -4%, 0) scale(1.12); }
	100% { transform: translate3d(-5%, 5%, 0) scale(0.94); }
}
@keyframes fade-in { from { opacity: 0; } }
@keyframes fade-up { from { opacity: 0; transform: translate3d(0, 24px, 0); filter: blur(8px); } to { opacity: 1; transform: none; filter: none; } }
@keyframes panel-in { from { opacity: 0; transform: translateY(-6px) scale(0.98); filter: blur(6px); } to { opacity: 1; filter: none; } }
@keyframes sheet-in { from { opacity: 0; transform: translateY(-12px); } to { opacity: 1; transform: none; } }
@keyframes tab-in { from { opacity: 0; transform: translateY(16px); filter: blur(8px); } to { opacity: 1; transform: none; filter: none; } }
@keyframes cue { 0% { opacity: 0; transform: translate(-50%, 0); } 30% { opacity: 1; } 100% { opacity: 0; transform: translate(-50%, 12px); } }
@keyframes ts-stamp { 0%, 3% { opacity: 0; transform: scale(1.45); } 9% { opacity: 1; transform: scale(1); } 76% { opacity: 1; transform: scale(1); } 84%, 100% { opacity: 0; transform: scale(0.92); } }
@keyframes ts-rise { 0%, 24% { opacity: 0; transform: translateY(26px); } 31% { opacity: 1; transform: translateY(0); } 76% { opacity: 1; transform: translateY(0); } 84%, 100% { opacity: 0; transform: translateY(10px); } }
@keyframes ts-ring { 0%, 42% { opacity: 0; transform: scale(0.9); } 48% { opacity: 1; transform: scale(1); } 56% { opacity: 0.5; transform: scale(1.07); } 64% { opacity: 1; transform: scale(1); } 76% { opacity: 1; transform: scale(1); } 84%, 100% { opacity: 0; transform: scale(1.12); } }
@keyframes pv-rise { 0% { opacity: 0; transform: translate3d(0, 5%, 0) scale(0.97); } 6%, 84% { opacity: 1; transform: none; } 92%, 100% { opacity: 0; transform: translate3d(0, -2%, 0); } }
@keyframes pv-pop { 0% { opacity: 0; transform: scale(1.35); } 4%, 80% { opacity: 1; transform: scale(1); } 88%, 100% { opacity: 0; transform: scale(0.94); } }
@keyframes pv-draw { 0% { stroke-dashoffset: 1; } 12%, 100% { stroke-dashoffset: 0; } }
@keyframes pv-fade { 0% { opacity: 0; } 10%, 80% { opacity: 1; } 88%, 100% { opacity: 0; } }
@keyframes pv-sweep { 0% { transform: rotate(var(--from)); } 14%, 100% { transform: rotate(var(--to)); } }
@keyframes pv-drop { 0% { opacity: 0; transform: translate(-50%, -180%); } 5%, 78% { opacity: 1; transform: translate(-50%, -100%); } 86%, 100% { opacity: 0; transform: translate(-50%, -100%); } }
@keyframes pv-ring { 0% { opacity: 0; transform: scale(0.9); } 4% { opacity: 1; transform: scale(1); } 12% { opacity: 0.4; transform: scale(1.12); } 20%, 76% { opacity: 1; transform: scale(1); } 84%, 100% { opacity: 0; transform: scale(1.15); } }

/* ---------- Reduced motion / transparency ---------- */
@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
		scroll-behavior: auto !important;
	}
	.tr-marquee .tr-marquee__track { animation: none !important; flex-wrap: wrap; justify-content: center; width: auto; row-gap: 20px; }
	.tr-marquee__track > [aria-hidden="true"] { display: none !important; }
	.rm-static { animation: none !important; opacity: 1 !important; transform: none !important; }
	.js .tr-reveal:not(.is-visible), .js .tr-reveal-rise:not(.is-visible) { opacity: 1; transform: none; filter: none; }
	.tr-hero__video { display: none; }
}
@media (prefers-reduced-transparency: reduce) {
	.tr-glass, .tr-case, .tr-header__bar::before { background: #fff; backdrop-filter: none; -webkit-backdrop-filter: none; }
	.tr-header.is-dark .tr-header__bar::before { background: #0f1b35; }
}

/* ---------- Editor: show everything statically ---------- */
.editor-styles-wrapper .tr-hero { min-height: 640px; }
.editor-styles-wrapper .tr-hero__content { min-height: 640px; }
.editor-styles-wrapper .tr-marquee { flex-wrap: wrap !important; justify-content: center; gap: 24px 64px; -webkit-mask-image: none; mask-image: none; }
.editor-styles-wrapper .tr-marquee .tr-logo img { height: 36px !important; width: auto !important; max-width: none; }
.editor-styles-wrapper .tr-marquee--sm .tr-logo img { height: 30px !important; }
.editor-styles-wrapper .tr-marquee__group { flex-wrap: wrap; justify-content: center; gap: 16px 40px; }
.editor-styles-wrapper .tr-marquee__group img { height: 30px !important; width: auto !important; }
.editor-styles-wrapper .tr-hero__media { position: absolute; inset: 0; }
.editor-styles-wrapper .tr-ptab__agent { margin-top: 8px; }

.screen-reader-text { position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
.editor-styles-wrapper .tr-stat__value { white-space: nowrap !important; }

/* ======================================================================
   Inner pages: masthead, article, post header, cards, search, 404
   ====================================================================== */

/* Next.js shows the header search on the homepage only. */
body:not(.home) .tr-search-open { display: none; }

/* ---------- Masthead (text pages, archives, search) ---------- */
.tr-masthead { overflow: hidden; padding: 128px 20px 64px; background: linear-gradient(180deg, #ffffff, #f2f6fd); }
@media (min-width: 768px) { .tr-masthead { padding: 172px 48px 80px; } }
.tr-masthead__art { position: absolute; inset: 0; overflow: hidden; pointer-events: none; }
.tr-masthead__art > span { position: absolute; border-radius: 50%; filter: blur(90px); }
.tr-masthead__art > span:nth-of-type(1) { right: -10%; top: -30%; width: 720px; height: 720px; background: radial-gradient(closest-side, rgba(56, 136, 255, 0.22), transparent); animation: aurora-drift 24s ease-in-out infinite alternate; }
.tr-masthead__art > span:nth-of-type(2) { left: -12%; top: 20%; width: 520px; height: 520px; background: radial-gradient(closest-side, rgba(255, 37, 173, 0.1), transparent); animation: aurora-drift 30s ease-in-out infinite alternate-reverse; }
.tr-masthead__inner { position: relative; }
body .tr-masthead__pill {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 6px 16px;
	border: 1px solid rgba(255, 255, 255, 0.6);
	border-radius: 999px;
	background: rgba(255, 255, 255, 0.72);
	-webkit-backdrop-filter: blur(22px) saturate(180%);
	backdrop-filter: blur(22px) saturate(180%);
	box-shadow: 0 8px 24px -12px rgba(15, 27, 53, 0.25);
	white-space: nowrap;
	font-size: 12px;
	font-weight: 600;
	line-height: 1.5;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--tr-blue-ink);
}
.tr-masthead__pill::before { content: ""; width: 16px; height: 16px; flex: none; background: var(--tr-theta-icon) center / contain no-repeat; }
body .tr-masthead__title { max-width: 1000px; margin-top: 28px; font-size: clamp(40px, 6.6vw, 84px); font-weight: 300; line-height: 1.02; letter-spacing: -0.042em; color: var(--tr-navy); text-wrap: balance; }
body .tr-masthead__dek, body .tr-masthead .wp-block-term-description { max-width: 700px; margin-top: 28px; font-size: 17px; font-weight: 300; line-height: 1.6; color: var(--tr-body); text-wrap: pretty; }
.tr-masthead .wp-block-term-description p { margin: 0; }
@media (min-width: 768px) { body .tr-masthead__dek, body .tr-masthead .wp-block-term-description { font-size: 20px; } }
.tr-masthead .tr-masthead__links { margin-top: 40px; gap: 8px; }
.is-style-pill-link .wp-block-button__link.wp-element-button {
	min-height: 40px;
	padding: 0 20px;
	border: 0;
	background: rgba(255, 255, 255, 0.7);
	box-shadow: inset 0 0 0 1px rgba(34, 58, 117, 0.14);
	color: var(--tr-navy);
	font-size: 14px;
	font-weight: 600;
}
.is-style-pill-link.is-current .wp-block-button__link.wp-element-button { background: var(--tr-navy); box-shadow: none; color: #fff; }
@media (hover: hover) and (pointer: fine) {
	.is-style-pill-link:not(.is-current) .wp-block-button__link.wp-element-button:hover { background: #fff; color: var(--tr-navy); box-shadow: inset 0 0 0 1px rgba(34, 58, 117, 0.14); }
	.is-style-pill-link.is-current .wp-block-button__link.wp-element-button:hover { background: var(--tr-navy); box-shadow: none; }
}

/* ---------- Article body (post and page content) ---------- */
.tr-article { background: #fff; padding: 32px 20px 96px; }
@media (min-width: 768px) { .tr-article { padding: 32px 48px 128px; } }
.tr-article__grid { display: grid; gap: 48px; }
@media (min-width: 1024px) { .tr-article__grid { grid-template-columns: 240px minmax(0, 1fr); gap: 80px; } }
.tr-toc { display: none; }
@media (min-width: 1024px) { .tr-toc { display: block; } }
.tr-toc nav { position: sticky; top: 112px; }
.tr-toc__label { margin: 0 0 16px; font-size: 11px; font-weight: 700; line-height: 1.5; letter-spacing: 0.18em; text-transform: uppercase; color: var(--tr-muted-2); }
.tr-toc ol { display: grid; gap: 4px; min-width: 0; margin: 0; padding: 0; list-style: none; border-left: 1px solid var(--tr-line); }
.tr-toc a { display: block; margin-left: -1px; padding: 6px 0 6px 16px; border-left: 1px solid transparent; font-size: 14px; line-height: 1.4; color: var(--tr-body-3); transition: color 0.15s, border-color 0.15s; }
.tr-toc a:hover { border-left-color: var(--tr-navy); color: var(--tr-navy); }
.tr-article__body { min-width: 0; max-width: 760px; }
body .tr-article__body > h2 { margin: 64px 0 20px; scroll-margin-top: 112px; font-size: clamp(28px, 3vw, 38px); font-weight: 300; line-height: 1.12; letter-spacing: -0.035em; color: var(--tr-navy); text-wrap: balance; }
body .tr-article__body > h2:first-child { margin-top: 0; }
body .tr-article__body > h3 { margin: 40px 0 12px; font-size: 21px; font-weight: 600; line-height: 1.3; letter-spacing: -0.015em; color: var(--tr-navy); }
body .tr-article__body > h4 { margin: 32px 0 12px; font-size: 18px; font-weight: 600; line-height: 1.4; color: var(--tr-navy); }
body .tr-article__body > p { margin: 0 0 20px; font-size: 17px; line-height: 1.75; color: var(--tr-body); }
@media (min-width: 768px) { body .tr-article__body > p { font-size: 18px; } }
.tr-article__body strong { font-weight: 700; }
.tr-article__body a:not(.wp-element-button) { font-weight: 600; color: var(--tr-blue-ink); text-decoration: underline; text-decoration-color: rgba(26, 95, 196, 0.35); text-decoration-thickness: 1px; text-underline-offset: 3px; transition: text-decoration-color 0.15s; }
.tr-article__body a:not(.wp-element-button):hover { text-decoration-color: var(--tr-blue-ink); }
.tr-article__body > ul, .tr-article__body > ol { display: grid; gap: 12px; margin: 0 0 24px; padding: 0; list-style: none; counter-reset: tr-li; }
.tr-article__body > ul > li, .tr-article__body > ol > li { position: relative; padding-left: 22px; font-size: 17px; line-height: 1.7; color: var(--tr-body); }
@media (min-width: 768px) { .tr-article__body > ul > li, .tr-article__body > ol > li { font-size: 18px; } }
.tr-article__body > ul > li::before { content: ""; position: absolute; left: 0; top: 11px; width: 6px; height: 6px; border-radius: 50%; background: var(--tr-blue); }
.tr-article__body > ol > li { min-height: 31px; padding-left: 44px; counter-increment: tr-li; }
.tr-article__body > ol > li::before { content: counter(tr-li); position: absolute; left: 0; top: 3px; display: flex; align-items: center; justify-content: center; width: 28px; height: 28px; border-radius: 50%; background: rgba(56, 136, 255, 0.12); color: var(--tr-blue-ink); font-size: 13px; font-weight: 700; line-height: 1; }
.tr-article__body li > ul, .tr-article__body li > ol { margin: 12px 0 0; padding-left: 20px; }
.tr-article__body .wp-block-quote { margin: 48px 0; padding: 0 0 0 28px; border: 0; border-left: 2px solid var(--tr-pink); }
@media (min-width: 768px) { .tr-article__body .wp-block-quote { padding-left: 36px; } }
body .tr-article__body .wp-block-quote p { margin: 0; font-size: clamp(22px, 2.4vw, 30px); font-weight: 300; line-height: 1.35; letter-spacing: -0.02em; color: var(--tr-navy); }
.tr-article__body .wp-block-quote p:first-child::before { content: "\201C"; }
.tr-article__body .wp-block-quote p:last-of-type::after { content: "\201D"; }
.tr-article__body .wp-block-quote cite { display: block; margin-top: 20px; font-size: 14px; font-style: normal; color: var(--tr-muted-2); }
.tr-article__body .wp-block-image, .tr-article__body .wp-block-embed { margin: 40px 0; }
.tr-article__body .wp-block-image > a { display: block; }
.tr-article__body .wp-block-image img { display: block; width: 100%; height: auto; border-radius: 22px; background: #fff; box-shadow: 0 0 0 1px rgba(34, 58, 117, 0.1), 0 24px 48px -36px rgba(15, 27, 53, 0.45); }
.tr-article__body .wp-element-caption, .tr-article__body figcaption { margin-top: 12px; font-size: 13px; text-align: left; color: var(--tr-muted-2); }
.tr-article__body .wp-block-embed iframe { display: block; width: 100%; border-radius: 22px; }
.tr-article__body .wp-block-table { margin: 40px 0; overflow-x: auto; border-radius: 20px; box-shadow: inset 0 0 0 1px rgba(34, 58, 117, 0.1); }
.tr-article__body .wp-block-table table { width: 100%; min-width: 560px; table-layout: auto; border-collapse: collapse; text-align: left; font-size: 15px; }
.tr-article__body .wp-block-table thead { border: 0; background: var(--tr-surface); }
.tr-article__body .wp-block-table th { padding: 16px 20px; border: 0; font-size: 12px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--tr-navy); }
.tr-article__body .wp-block-table :is(td, th) { word-break: normal; overflow-wrap: normal; }
.tr-article__body .wp-block-table td { padding: 16px 20px; border: 0; border-top: 1px solid rgba(34, 58, 117, 0.08); vertical-align: top; line-height: 1.6; color: var(--tr-body); }
.tr-article__body .wp-block-table td:first-child { font-weight: 600; color: var(--tr-navy); }
.tr-article__body .wp-block-table figcaption { padding: 0 20px 16px; }
/* WordPress removes the last child margin in flow layouts; the site keeps it. */
.tr-article__body.tr-article__body > p:last-child { margin-bottom: 20px; }
.tr-article__body.tr-article__body > :is(ul, ol):last-child { margin-bottom: 24px; }
.tr-article__body.tr-article__body > h2:last-child { margin-bottom: 20px; }
.tr-article__body.tr-article__body > :is(h3, h4):last-child { margin-bottom: 12px; }
/* ...and the first child top margin; the site only drops it for a leading H2. */
.tr-article__body.tr-article__body > h3:first-child { margin-top: 40px; }
.tr-article__body > .wp-block-separator { margin: 48px 0; border: 0; border-top: 1px solid var(--tr-line); }

/* ---------- Post header (blog posts) ---------- */
.tr-post-header { background: #fff; padding: 112px 20px 48px; }
@media (min-width: 768px) { .tr-post-header { padding: 140px 48px 64px; } }
body .tr-breadcrumb { display: flex; align-items: center; gap: 8px; margin-bottom: 40px; font-size: 13px; font-weight: 600; line-height: 1.5; color: var(--tr-muted-2); }
@media (min-width: 768px) { body .tr-breadcrumb { margin-bottom: 56px; } }
.tr-breadcrumb a { transition: color 0.15s; }
.tr-breadcrumb a:hover { color: var(--tr-navy); }
.tr-breadcrumb a::after { content: "/"; margin-left: 8px; color: var(--tr-muted-2); }
.tr-breadcrumb span { color: var(--tr-navy); }
.tr-post-header__grid { display: grid; align-items: center; gap: 40px; }
@media (min-width: 1024px) {
	.tr-post-header__grid { grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 56px; }
	.tr-post-header__copy { grid-column: span 7; }
	.tr-post-header__grid > .tr-cover { grid-column: span 5; }
}
body .tr-post-header__title { margin-top: 20px; font-size: clamp(38px, 5vw, 66px); font-weight: 300; line-height: 1.04; letter-spacing: -0.045em; color: var(--tr-navy); text-wrap: balance; }
body .tr-post-header__dek { max-width: 620px; margin-top: 24px; font-size: 18px; font-weight: 300; line-height: 1.6; color: var(--tr-body); }
@media (min-width: 768px) { body .tr-post-header__dek { font-size: 20px; } }
.tr-post-header__dek p, .tr-masthead__dek p { margin: 0; }
.tr-byline { margin-top: 32px; }
body .tr-byline__label { margin-bottom: 12px; font-size: 11px; font-weight: 700; line-height: 1.5; letter-spacing: 0.18em; text-transform: uppercase; color: var(--tr-muted-2); }
.tr-byline .wp-block-post-author { display: flex; align-items: center; gap: 14px; max-width: 340px; margin: 0; }
.tr-byline .wp-block-post-author__avatar { margin: 0; flex: none; }
.tr-byline .wp-block-post-author__avatar img { display: block; width: 56px; height: 56px; border-radius: 50%; object-fit: cover; box-shadow: 0 0 0 2px #fff, 0 8px 20px -10px rgba(15, 27, 53, 0.5); }
.tr-byline .wp-block-post-author__content { min-width: 0; }
body .tr-byline .wp-block-post-author__name { margin: 0; font-size: 15px; font-weight: 600; line-height: 1.5; color: var(--tr-navy); }
body .tr-byline .wp-block-post-author__bio { margin: 2px 0 0; font-size: 13px; line-height: 1.4; color: var(--tr-muted-2); }
.tr-post-header__meta { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px; margin-top: 32px; font-size: 14px; line-height: 1.5; color: var(--tr-muted-2); }

/* ---------- Cover art: featured image, or a branded tile when there is none ---------- */
.tr-cover { position: relative; overflow: hidden; background: var(--tr-surface); }
.tr-cover--hero { aspect-ratio: 4 / 3; border-radius: 32px; box-shadow: 0 40px 80px -44px rgba(15, 27, 53, 0.5), 0 0 0 1px rgba(0, 0, 0, 0.05); }
.tr-cover--card { aspect-ratio: 16 / 10; border-radius: 22px; }
.tr-cover--logo { background: #fff; }
body .tr-cover--logo .wp-block-post-featured-image img { padding: 18% 14%; object-fit: contain; }
.tr-cover .wp-block-post-featured-image { position: absolute; inset: 0; z-index: 1; margin: 0; }
.tr-cover .wp-block-post-featured-image a { display: block; height: 100%; }
.tr-cover .wp-block-post-featured-image img { width: 100%; height: 100% !important; object-fit: cover; transition: transform 1.2s var(--tr-ease-expo); }
.tr-rcard:hover .tr-cover img { transform: scale(1.04); }
.tr-cover__art { position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: flex-end; overflow: hidden; padding: 24px; background: linear-gradient(150deg, #1a5fc4 0%, #223a75 60%, #16264d 100%); color: #fff; transition: transform 1.2s var(--tr-ease-expo); }
.tr-cover--hero .tr-cover__art { padding: 36px; }
.tr-cover.has-image .tr-cover__art { display: none; }
.tr-rcard:hover .tr-cover__art { transform: scale(1.03); }
.tr-cover__art::before { content: ""; position: absolute; right: -80px; top: -96px; width: 288px; height: 288px; border-radius: 50%; background: radial-gradient(closest-side, rgba(255, 255, 255, 0.35), transparent); }
.tr-cover__art::after { content: ""; position: absolute; right: -16px; top: 16px; width: 120px; aspect-ratio: 1; background: var(--tr-theta-icon) center / contain no-repeat; filter: brightness(0) invert(1); opacity: 0.08; }
.tr-cover--hero .tr-cover__art::after { right: -24px; top: 32px; width: 220px; }
.tr-cover__kicker { position: relative; font-size: 11px; font-weight: 700; line-height: 1.5; letter-spacing: 0.2em; text-transform: uppercase; color: #9fd4ff; }
.tr-tone-1 .tr-cover__art { background: linear-gradient(150deg, #eef4ff 0%, #d3e3fd 100%); color: var(--tr-navy); }
.tr-tone-1 .tr-cover__art::after, .tr-tone-3 .tr-cover__art::after { filter: none; opacity: 0.07; }
.tr-tone-1 .tr-cover__kicker { color: var(--tr-blue-ink); }
.tr-tone-2 .tr-cover__art { background: linear-gradient(150deg, #3888ff 0%, #1a5fc4 100%); }
.tr-tone-2 .tr-cover__art::after { opacity: 0.1; }
.tr-tone-2 .tr-cover__kicker { color: rgba(255, 255, 255, 0.75); }
.tr-tone-3 .tr-cover__art { background: linear-gradient(150deg, #fff5fa 0%, #fbdcee 100%); color: var(--tr-navy); }
.tr-tone-3 .tr-cover__kicker { color: #c40080; }

/* ---------- Resource cards (archives, search, related) ---------- */
.tr-listing { background: #fff; padding: 24px 20px 96px; }
@media (min-width: 768px) { .tr-listing { padding: 24px 48px 128px; } }
.tr-post-grid { display: grid !important; gap: 48px 24px; margin: 0; padding: 0; list-style: none; }
@media (min-width: 640px) { .tr-post-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .tr-post-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 64px 32px; } }
.tr-post-grid > li { margin: 0; }
.tr-rcard { position: relative; display: flex; flex-direction: column; height: 100%; }
.tr-rcard__kicker { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; margin-top: 20px; font-size: 11px; font-weight: 700; line-height: 1.5; letter-spacing: 0.16em; text-transform: uppercase; }
body .tr-rcard__kind { color: #1a73b8; }
body .is-kind-case-study .tr-rcard__kind, body .is-kind-customer-story .tr-rcard__kind { color: #1a5fc4; }
body .is-kind-white-paper .tr-rcard__kind { color: #c40080; }
.tr-rcard__topic:empty { display: none; }
.tr-rcard__kind + .tr-rcard__topic::before { content: ""; display: inline-block; width: 1px; height: 12px; margin-right: 10px; vertical-align: -1px; background: rgba(34, 58, 117, 0.2); }
.tr-rcard__topic { position: relative; z-index: 2; color: var(--tr-muted-2); }
.tr-rcard__topic a { color: inherit; pointer-events: none; }
.tr-rcard__topic a:not(:first-of-type), .tr-rcard__topic .wp-block-post-terms__separator { display: none; }
body .tr-rcard__title { margin-top: 12px; font-size: 20px; font-weight: 600; line-height: 1.25; letter-spacing: -0.015em; color: var(--tr-navy); text-wrap: pretty; }
.tr-rcard__title a { text-decoration: underline; text-decoration-color: transparent; text-decoration-thickness: 1px; text-underline-offset: 4px; transition: text-decoration-color 0.15s; }
.tr-rcard:hover .tr-rcard__title a { text-decoration-color: rgba(34, 58, 117, 0.3); }
.tr-rcard__title a::after { content: ""; position: absolute; inset: 0; z-index: 1; }
.tr-rcard__meta { display: flex; flex-wrap: wrap; align-items: center; margin-top: 12px; font-size: 13px; font-weight: 500; line-height: 1.5; color: var(--tr-muted-2); }
.tr-rcard__meta > * + *::before { content: "\00b7"; margin: 0 4px; }
.tr-pagination { gap: 8px; margin-top: 64px; font-size: 14px; font-weight: 600; color: var(--tr-navy); }
.tr-pagination .page-numbers, .tr-pagination > a { display: inline-flex; align-items: center; justify-content: center; min-width: 40px; min-height: 40px; padding: 0 12px; border-radius: 999px; box-shadow: inset 0 0 0 1px rgba(34, 58, 117, 0.14); }
.tr-pagination .page-numbers.current { background: var(--tr-navy); box-shadow: none; color: #fff; }
.tr-pagination .page-numbers.dots { box-shadow: none; }
body .tr-no-results { font-size: 17px; font-weight: 300; color: var(--tr-body); }

/* Related posts on a post */
.tr-related { background: var(--tr-surface); padding: 96px 20px; }
@media (min-width: 768px) { .tr-related { padding: 112px 48px; } }
.tr-related__head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 24px; margin-bottom: 40px; }
@media (min-width: 768px) { .tr-related__head { margin-bottom: 48px; } }
body .tr-related .tr-related__head > .tr-related__title { margin-top: 16px; font-size: clamp(30px, 4vw, 48px); line-height: 1.05; }

/* Search page form */
.tr-search-form { max-width: 700px; margin-top: 32px; }
.tr-search-form .wp-block-search__inside-wrapper { gap: 8px; padding: 6px; border: 0; border-radius: 999px; background: #fff; box-shadow: 0 0 0 1px rgba(34, 58, 117, 0.14), 0 18px 40px -24px rgba(15, 27, 53, 0.3); }
.tr-search-form .wp-block-search__input { min-height: 44px; padding: 0 18px; border: 0; background: transparent; font-family: inherit; color: var(--tr-navy); }
.tr-search-form .wp-block-search__input:focus { outline: none; }
.tr-search-form .wp-block-search__button { margin: 0; min-height: 44px; padding: 0 22px; border: 0; border-radius: 999px; background: var(--tr-blue); color: #fff; font-family: inherit; font-size: 14px; font-weight: 600; cursor: pointer; }

/* ---------- 404 ---------- */
.tr-404 { display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 60svh; padding: 96px 20px; text-align: center; background: linear-gradient(180deg, #ffffff, #f2f6fd); }
body .tr-404__title { margin-top: 16px; font-size: clamp(34px, 5vw, 52px); }
body .tr-404 .tr-404__title strong { background: none; color: inherit; -webkit-background-clip: border-box; background-clip: border-box; }
body .tr-404__body { max-width: 520px; margin-top: 16px; font-size: 17px; font-weight: 300; line-height: 1.5; color: var(--tr-body); }
.tr-404__buttons { margin-top: 32px; justify-content: center; }

/* Designed pages are made of full-width sections: no spacing from the post content wrapper. */
.tr-designed > * { margin: 0; }

/* ======================================================================
   Listings: Resources hub, News & Media, Events (Batch B)
   ====================================================================== */

/* Filter tabs with counts (rendered by [thetaray_filters]) */
.tr-tabs { display: flex; gap: 4px; margin-bottom: 40px; overflow-x: auto; border-bottom: 1px solid rgba(34, 58, 117, 0.1); scrollbar-width: none; }
.tr-tabs::-webkit-scrollbar { display: none; }
@media (min-width: 768px) { .tr-tabs { margin-bottom: 56px; } }
.tr-tab-link { position: relative; display: flex; flex: none; align-items: center; gap: 8px; min-height: 48px; padding: 0 16px; white-space: nowrap; font-size: 14px; font-weight: 600; color: var(--tr-muted-2); transition: color 0.15s; }
.tr-tab-link:hover, .tr-tab-link.is-current { color: var(--tr-navy); }
.tr-tab-link.is-current::after { content: ""; position: absolute; inset: auto 12px -1px; height: 2px; border-radius: 999px; background: var(--tr-navy); }
.tr-tab-link__count { font-size: 12px; font-weight: 500; font-variant-numeric: tabular-nums; color: var(--tr-muted-2); }
.wp-block-shortcode:has(> .tr-tabs), .tr-listing .tr-container > p:has(> .tr-tabs) { margin: 0; }

/* "Show more": the next-page link of a Query Loop, loaded in place by the script */
.tr-show-more { margin-top: 56px; }
.tr-show-more .wp-block-query-pagination-next {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	min-height: 48px;
	padding: 0 28px;
	border: 1px solid rgba(56, 136, 255, 0.4);
	border-radius: 999px;
	color: var(--tr-blue);
	font-size: 15px;
	font-weight: 600;
	transition: background-color 0.16s;
}
.tr-show-more .wp-block-query-pagination-next:hover { background: rgba(56, 136, 255, 0.06); }
.tr-show-more__count { font-size: 13px; font-weight: 500; font-variant-numeric: tabular-nums; color: var(--tr-muted-2); }
.tr-show-more.is-loading { opacity: 0.5; pointer-events: none; }

/* As featured in */
.tr-outlets { margin-bottom: 56px; padding-bottom: 48px; border-bottom: 1px solid rgba(34, 58, 117, 0.12); }
@media (min-width: 768px) { .tr-outlets { margin-bottom: 64px; padding-bottom: 56px; } }
body .tr-outlets__title { margin-bottom: 32px; text-align: center; font-size: 12px; font-weight: 700; line-height: 1.5; letter-spacing: 0.22em; text-transform: uppercase; color: var(--tr-navy); }
.tr-outlets__logos { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 32px 24px; }
/* Two rows drifting in opposite directions (0.9.0); a static wrap with reduced motion, as the other strips. */
.tr-outlets .tr-marquee + .tr-marquee { margin-top: 24px; }
@media (min-width: 768px) { .tr-outlets .tr-marquee + .tr-marquee { margin-top: 32px; } }
.tr-marquee--outlets .tr-marquee__track { gap: 40px; }
@media (min-width: 768px) { .tr-marquee--outlets .tr-marquee__track { gap: 56px; } }
.tr-marquee--reverse .tr-marquee__track { animation-direction: reverse; }
.tr-marquee--outlets .tr-outlet { display: flex; flex: none; align-items: center; justify-content: center; width: 132px; height: 48px; margin: 0; opacity: 0.7; transition: opacity 0.3s; }
@media (min-width: 768px) { .tr-marquee--outlets .tr-outlet { width: 150px; } }
.tr-marquee--outlets .tr-outlet:hover { opacity: 1; }
.tr-marquee--outlets .tr-outlet img { max-width: 100%; max-height: 30px; width: auto; height: auto; }
.tr-marquee--outlets .tr-logo__mark { height: 30px; max-width: 100%; }
@media (min-width: 768px) { .tr-outlets__logos { column-gap: 40px; } }
.tr-outlet { display: flex; align-items: center; justify-content: center; width: 132px; height: 48px; margin: 0 !important; opacity: 0.7; transition: opacity 0.3s; }
.tr-outlet:hover { opacity: 1; }
@media (min-width: 768px) { .tr-outlet { width: 150px; } }
.tr-outlet img { display: block; max-width: 100%; max-height: 39px; width: auto; height: auto; }
.tr-mark { display: block; max-width: 100%; background: var(--tr-navy); -webkit-mask: var(--src) center / contain no-repeat; mask: var(--src) center / contain no-repeat; }

/* News: tile with the outlet logo (or photo) on a tint per category */
.tr-ntile { position: relative; overflow: hidden; background: linear-gradient(145deg, #f5f8fd 0%, #dfeafe 100%); isolation: isolate; }
.is-kind-press-release .tr-ntile, .is-kind-press-releases .tr-ntile { background: linear-gradient(145deg, #eaf2ff 0%, #c9dcfb 100%); }
.is-kind-interviews .tr-ntile { background: linear-gradient(145deg, #3888ff 0%, #1a5fc4 100%); }
.is-kind-interviews .tr-ntile .tr-mark { background: #fff; }
.is-kind-awards .tr-ntile { background: linear-gradient(145deg, #fff5fa 0%, #fbdcee 100%); }
.is-kind-podcasts .tr-ntile { background: linear-gradient(145deg, #223a75 0%, #101d40 100%); }
.is-kind-podcasts .tr-ntile .tr-mark { background: #fff; }
.tr-ntile::before { content: ""; position: absolute; right: -64px; top: -80px; width: 256px; height: 256px; border-radius: 50%; background: radial-gradient(closest-side, rgba(255, 255, 255, 0.35), transparent); pointer-events: none; }
.tr-ntile--card { aspect-ratio: 16 / 10; border-radius: 22px; }
.tr-ntile--lead { aspect-ratio: 16 / 10; border-radius: 28px; }
.tr-ntile .wp-block-post-featured-image { position: absolute; inset: 0; margin: 0; }
.tr-ntile .wp-block-post-featured-image a { display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; transition: transform 1.2s var(--tr-ease-expo); }
.tr-ncard:hover .tr-ntile a, .tr-nlead:hover .tr-ntile a { transform: scale(1.04); }
.tr-ntile .wp-block-post-featured-image img { width: auto !important; height: auto !important; max-width: 64%; max-height: 42px; object-fit: contain; mix-blend-mode: multiply; }
.tr-ntile--lead .wp-block-post-featured-image img { max-height: 64px; }
.tr-ntile .tr-mark { margin: auto; }
.tr-ntile.is-photo .wp-block-post-featured-image img { max-width: none; max-height: none; width: 100% !important; height: 100% !important; object-fit: cover; mix-blend-mode: normal; }
.tr-nkicker { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; font-size: 11px; font-weight: 700; line-height: 1.5; letter-spacing: 0.16em; text-transform: uppercase; }
body .tr-nkicker__kind { color: var(--tr-blue-ink); }
.is-kind-awards .tr-nkicker__kind { color: #c40080; }
.tr-nkicker__kind::after { content: ""; display: inline-block; width: 1px; height: 12px; margin-left: 10px; vertical-align: -1px; background: rgba(34, 58, 117, 0.2); }
.tr-nkicker__date { color: var(--tr-muted-2); }
.tr-ncard { position: relative; display: flex; flex-direction: column; height: 100%; }
.tr-ncard > .tr-nkicker { margin-top: 20px; }
body .tr-ncard__title { display: -webkit-box; margin-top: 12px; overflow: hidden; -webkit-line-clamp: 3; -webkit-box-orient: vertical; font-size: 19px; font-weight: 600; line-height: 1.3; letter-spacing: -0.015em; color: var(--tr-navy); text-wrap: pretty; }
/* Podcasts and interviews: Watch episode, Listen to episode, Watch video. */
body .tr-ncard__cta { margin-top: 16px; font-size: 14px; font-weight: 600; line-height: 1.5; color: var(--tr-blue-ink); }
body .tr-ncard__cta::after { content: " →"; }
body .tr-ncard__cta:empty { display: none; }
.tr-ncard__title a, .tr-nlead__title a, .tr-ecard__title a, .tr-erow__title a { text-decoration: underline; text-decoration-color: transparent; text-decoration-thickness: 1px; text-underline-offset: 4px; transition: text-decoration-color 0.15s; }
.tr-ncard:hover .tr-ncard__title a, .tr-ecard:hover .tr-ecard__title a { text-decoration-color: rgba(34, 58, 117, 0.3); }
.tr-ncard__title a::after, .tr-nlead__title a::after, .tr-ecard__title a::after, .tr-erow__title a::after, .tr-efeature__title a::after { content: ""; position: absolute; inset: 0; z-index: 1; }
.tr-nlead-list { margin: 0 0 64px !important; padding: 0; list-style: none; }
@media (min-width: 768px) { .tr-nlead-list { margin-bottom: 80px !important; } }
.tr-nlead { position: relative; display: grid; align-items: center; gap: 32px; }
@media (min-width: 768px) {
	.tr-nlead { grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 48px; }
	.tr-nlead > .tr-ntile { grid-column: span 7; }
	.tr-nlead__text { grid-column: span 5; }
}
.tr-nlead__text { display: flex; flex-direction: column; }
body .tr-nlead__badge { align-self: flex-start; margin-bottom: 20px; padding: 4px 12px; border-radius: 999px; background: var(--tr-navy); color: #fff; font-size: 11px; font-weight: 700; line-height: 1.5; letter-spacing: 0.16em; text-transform: uppercase; }
body .tr-nlead__title { display: -webkit-box; margin-top: 16px; overflow: hidden; -webkit-line-clamp: 3; -webkit-box-orient: vertical; font-size: clamp(26px, 2.6vw, 38px); font-weight: 300; line-height: 1.1; letter-spacing: -0.035em; color: var(--tr-navy); text-wrap: balance; }
.tr-nlead:hover .tr-nlead__title a { text-decoration-color: rgba(34, 58, 117, 0.25); text-underline-offset: 6px; }
body .tr-nlead__more { margin-top: 28px; font-size: 14px; font-weight: 600; line-height: 1.5; color: var(--tr-blue-ink); }
.tr-nlead__more::after { content: " \2192"; }

/* Media contacts */
.tr-media { padding: 96px 20px; background: linear-gradient(180deg, #ffffff, #f5f8fd); }
@media (min-width: 768px) { .tr-media { padding: 128px 48px; } }
.tr-media__intro { max-width: 820px; margin-bottom: 48px; }
@media (min-width: 768px) { .tr-media__intro { margin-bottom: 56px; } }
body .tr-media__title { margin: 20px 0; font-size: clamp(34px, 5vw, 60px); line-height: 1.03; letter-spacing: -0.045em; }
.tr-channels { display: grid; gap: 12px; margin-top: 24px; }
@media (min-width: 768px) { .tr-channels { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.tr-channel { position: relative; display: flex; flex-direction: column; justify-content: center; padding: 20px 56px 20px 24px; border-radius: 20px; background: #fff; box-shadow: 0 0 0 1px rgba(34, 58, 117, 0.08); transition: box-shadow 0.3s; }
.tr-channel:hover { box-shadow: 0 0 0 1px rgba(34, 58, 117, 0.08), 0 20px 40px -24px rgba(15, 27, 53, 0.4); }
.tr-channel::after { content: "\2192"; position: absolute; right: 24px; top: 50%; translate: 0 -50%; color: var(--tr-navy); transition: transform 0.4s var(--tr-ease-expo); }
.tr-channel:hover::after { transform: translateX(4px); }
body .tr-channel__label { font-size: 12px; font-weight: 700; line-height: 1.5; letter-spacing: 0.14em; text-transform: uppercase; color: var(--tr-muted-2); }
body .tr-channel__email { margin-top: 4px; font-size: 16px; font-weight: 600; line-height: 1.5; color: var(--tr-navy); }
.tr-channel__email a::after { content: ""; position: absolute; inset: 0; }

/* Events: next event */
.tr-efeature-list { margin: 0 0 64px !important; padding: 0; list-style: none; }
@media (min-width: 768px) { .tr-efeature-list { margin-bottom: 80px !important; } }
.tr-efeature { position: relative; isolation: isolate; display: flex; flex-direction: column; justify-content: flex-end; min-height: 460px; overflow: hidden; padding: 28px; border-radius: 32px; background: var(--tr-navy-900); color: #fff; }
@media (min-width: 768px) { .tr-efeature { min-height: 560px; padding: 48px; } }
.tr-efeature > .tr-ecover { position: absolute; inset: 0; z-index: -2; }
.tr-efeature::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(0deg, rgba(15, 27, 53, 0.95) 0%, rgba(15, 27, 53, 0.55) 60%, rgba(15, 27, 53, 0.2) 100%); }
@media (min-width: 768px) { .tr-efeature::before { background: linear-gradient(90deg, rgba(15, 27, 53, 0.92) 0%, rgba(15, 27, 53, 0.65) 45%, rgba(15, 27, 53, 0.1) 100%); } }
.tr-efeature__text { display: flex; flex-direction: column; }
body .tr-efeature__badge { align-self: flex-start; margin-bottom: 24px; padding: 4px 12px; border-radius: 999px; background: rgba(255, 255, 255, 0.15); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); color: #fff; font-size: 11px; font-weight: 700; line-height: 1.5; letter-spacing: 0.16em; text-transform: uppercase; }
body .tr-efeature__title { font-size: clamp(44px, 7vw, 96px); font-weight: 300; line-height: 0.95; letter-spacing: -0.05em; color: #fff; }
body .tr-efeature__when { margin-top: 20px; font-size: 15px; font-weight: 600; line-height: 1.5; color: rgba(255, 255, 255, 0.85); }
body .tr-efeature__note { max-width: 560px; margin-top: 12px; font-size: 16px; font-weight: 300; line-height: 1.6; color: rgba(255, 255, 255, 0.8); }
@media (min-width: 768px) { body .tr-efeature__when { font-size: 17px; } body .tr-efeature__note { font-size: 18px; } }
body .tr-efeature__more { align-self: flex-start; margin-top: 32px; padding: 12px 24px; border-radius: 999px; background: #fff; color: var(--tr-navy); font-size: 14px; font-weight: 600; line-height: 1.5; transition: transform 0.5s var(--tr-ease-expo); }
.tr-efeature__more::after { content: " \2192"; }
.tr-efeature:hover .tr-efeature__more { transform: translateX(4px); }
.tr-ecover { overflow: hidden; }
.tr-ecover .wp-block-post-featured-image { position: absolute; inset: 0; z-index: 1; margin: 0; }
.tr-ecover .wp-block-post-featured-image img { width: 100% !important; height: 100% !important; object-fit: cover; transition: transform 1.2s var(--tr-ease-expo); }
.tr-efeature:hover .tr-ecover img, .tr-ecard:hover .tr-ecover img { transform: scale(1.04); }
.tr-ecover__art { position: absolute; inset: 0; overflow: hidden; background: linear-gradient(145deg, #2d4d92, #0f1b35); }
.tr-ecover__art::before { content: ""; position: absolute; right: -80px; top: -96px; width: 288px; height: 288px; border-radius: 50%; background: radial-gradient(closest-side, rgba(96, 216, 255, 0.4), transparent); }

/* Events: later events and past events */
body .tr-events__label { padding-bottom: 16px; border-bottom: 1px solid rgba(34, 58, 117, 0.12); font-size: 12px; font-weight: 700; line-height: 1.5; letter-spacing: 0.22em; text-transform: uppercase; color: var(--tr-navy); }
body .tr-events__label--later { margin-bottom: 32px; }
body .tr-events__label--past { margin-top: 80px; }
@media (min-width: 768px) { body .tr-events__label--past { margin-top: 96px; } }
.tr-events__label:has(+ .tr-q-44 .tr-ecards:empty), .tr-q-44:has(.tr-ecards:empty) { display: none; }
@media (min-width: 1024px) { .tr-ecards { row-gap: 48px !important; } }
.tr-ecard { position: relative; display: flex; flex-direction: column; height: 100%; }
.tr-ecard__cover { position: relative; aspect-ratio: 16 / 10; overflow: hidden; border-radius: 22px; background: var(--tr-surface); }
.tr-ecard__cover > .tr-ecover { position: absolute; inset: 0; }
.tr-datebadge { position: absolute; left: 16px; top: 16px; z-index: 2; display: flex; flex-direction: column; align-items: center; justify-content: center; width: 68px; height: 68px; border-radius: 16px; background: #fff; box-shadow: 0 12px 28px -14px rgba(15, 27, 53, 0.5); }
body .tr-datebadge__month { font-size: 11px; font-weight: 700; line-height: 1.5; letter-spacing: 0.14em; text-transform: uppercase; color: #c40080; }
body .tr-datebadge__day { font-size: 26px; font-weight: 700; line-height: 1; letter-spacing: -0.04em; color: var(--tr-navy); }
body .tr-ecard__when { margin-top: 20px; font-size: 11px; font-weight: 700; line-height: 1.5; letter-spacing: 0.16em; text-transform: uppercase; color: var(--tr-muted-2); }
body .tr-ecard__title { margin-top: 12px; font-size: 22px; font-weight: 600; line-height: 1.2; letter-spacing: -0.02em; color: var(--tr-navy); }
body .tr-ecard__note { margin-top: 8px; font-size: 15px; line-height: 1.55; color: var(--tr-body-3); }
body .tr-ecard__more { margin-top: auto; padding-top: 16px; font-size: 14px; font-weight: 600; line-height: 1.5; color: var(--tr-blue-ink); }
.tr-ecard__more::after { content: " \2192"; }
.tr-erows { margin: 0; padding: 0; list-style: none; }
.tr-erows > li { margin: 0; border-bottom: 1px solid rgba(34, 58, 117, 0.08); }
.tr-erow { position: relative; display: grid; gap: 4px; padding: 24px 0; }
@media (min-width: 768px) { .tr-erow { grid-template-columns: 200px minmax(0, 1fr) minmax(0, 1.2fr) auto; align-items: baseline; gap: 32px; } .tr-erow::after { content: "\2192"; color: var(--tr-blue-ink); } }
body .tr-erow__when { font-size: 13px; font-weight: 600; line-height: 1.5; color: var(--tr-muted-2); }
body .tr-erow__title { font-size: 20px; font-weight: 600; line-height: 1.5; letter-spacing: -0.02em; color: var(--tr-navy); }
body .tr-erow__note { font-size: 14px; line-height: 1.5; color: var(--tr-body-3); }

/* Single templates: breadcrumb as two blocks, event date line */
.tr-breadcrumb.wp-block-group { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.tr-breadcrumb.wp-block-group > p { margin: 0; }
body .tr-breadcrumb__current { color: var(--tr-navy); }
.tr-breadcrumb__parent:last-child a::after { content: none; }
body .tr-post-header__when { margin: 0; }

/* ---------- 0.3.1: staging content ---------- */
body .is-kind-whitepaper .tr-rcard__kind, body .is-kind-ebook .tr-rcard__kind { color: #c40080; }

/* Resources whose page is a video or podcast */
.tr-resource-embed { margin: 0 0 32px; }
.tr-resource-embed iframe { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; border: 0; border-radius: 20px; }
.tr-listen { display: flex; flex-wrap: wrap; gap: 12px; margin: 0; }
.tr-listen__link { display: inline-flex; align-items: center; padding: 10px 18px; border-radius: 999px; border: 1px solid rgba(34, 58, 117, 0.18); font-size: 14px; font-weight: 600; color: var(--tr-navy); transition: border-color 0.15s, color 0.15s; }
.tr-listen__link:hover { border-color: var(--tr-blue); color: var(--tr-blue); }

/* Demo request: what to expect beside the HubSpot form */
.tr-demo { padding: 72px 20px 96px; background: linear-gradient(180deg, #ffffff, #f5f8fd); }
@media (min-width: 768px) { .tr-demo { padding: 96px 48px 128px; } }
.tr-demo__grid { display: grid; gap: 48px; }
@media (min-width: 1024px) { .tr-demo__grid { grid-template-columns: minmax(0, 1fr) minmax(0, 520px); gap: 72px; align-items: start; } }
body .tr-demo__title { margin: 20px 0; font-size: clamp(30px, 4vw, 48px); line-height: 1.05; letter-spacing: -0.04em; }
body .tr-demo__points { margin: 32px 0; padding: 0; list-style: none; display: grid; gap: 20px; }
body .tr-demo__points li { position: relative; padding-left: 32px; font-size: 16px; line-height: 1.6; color: var(--tr-muted); }
.tr-demo__points li::before { content: ""; position: absolute; left: 0; top: 4px; width: 18px; height: 18px; border-radius: 50%; background: linear-gradient(135deg, #1a5fc4, #36a3ff); box-shadow: inset 0 0 0 5px #fff; outline: 1px solid rgba(26, 95, 196, 0.35); }
body .tr-demo__points strong { color: var(--tr-navy); font-weight: 600; }
body .tr-demo__note { font-size: 15px; line-height: 1.6; color: var(--tr-muted-2); }
.tr-demo__card { padding: 32px 24px; border-radius: 28px; background: #fff; box-shadow: 0 40px 80px -48px rgba(15, 27, 53, 0.45), 0 0 0 1px rgba(15, 27, 53, 0.06); }
@media (min-width: 768px) { .tr-demo__card { padding: 40px; } }
body .tr-demo__card-title { margin: 0 0 24px; font-size: 24px; font-weight: 600; line-height: 1.2; color: var(--tr-navy); }
.tr-demo-form__embed { min-height: 480px; }

/* ======================================================================
   Batch C: hub and product pages (src/sections/heroes.tsx, hub.tsx, product.tsx)
   ====================================================================== */
@keyframes rh-glow { 0%, 100% { opacity: 0.45; transform: scale(0.92); } 50% { opacity: 0.9; transform: scale(1.06); } }
@keyframes rh-spin { to { transform: rotate(360deg); } }
@keyframes rh-spin-rev { to { transform: rotate(-360deg); } }
@keyframes rh-pulse { 0% { transform: scale(0.35); opacity: 0; } 15% { opacity: 0.7; } 100% { transform: scale(1.25); opacity: 0; } }
@keyframes alert-cycle { 0% { opacity: 0; transform: translateY(14px) scale(0.97); } 3%, 16% { opacity: 1; transform: none; } 19.5%, 100% { opacity: 0; transform: translateY(-8px) scale(0.98); } }
@keyframes feed-in { from { opacity: 0; transform: translateY(-14px) scale(0.98); } to { opacity: 1; transform: none; } }
@keyframes ring-pink { 0% { box-shadow: 0 0 0 0 rgba(255, 37, 173, 0.6); } 70%, 100% { box-shadow: 0 0 0 5px rgba(255, 37, 173, 0); } }
@keyframes ring-hue { 0% { box-shadow: 0 0 0 0 rgba(var(--hue-rgb), 0.55); } 70%, 100% { box-shadow: 0 0 0 5px rgba(var(--hue-rgb), 0); } }

/* Shared pieces: product-hue eyebrow, whole-card links, check marks, product icons */
:root {
	--tr-check-white: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14'%3E%3Cpath d='M3 7.4 5.8 10 11 4.2' fill='none' stroke='%23fff' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
	--tr-check-blue: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14'%3E%3Cpath d='M3 7.4 5.8 10 11 4.2' fill='none' stroke='%231a5fc4' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
	--tr-check-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14'%3E%3Cpath d='M3 7.4 5.8 10 11 4.2' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}
.tr-eyebrow--hue { color: var(--hue-ink); }
.tr-card-link a::before { content: ""; position: absolute; inset: 0; z-index: 1; border-radius: inherit; }
.tr-card-link a:focus-visible { outline: none; }
.tr-card-link a:focus-visible::before { outline: 2px solid var(--tr-blue); outline-offset: 2px; }
/* The product mark (theta pin or Ray mark) filled with the product colour. */
.tr-pin, .tr-hcard__eyebrow::before, .tr-xlink__title::before, .tr-suite__item::after, .tr-eyebrow--agent::before, .tr-agent__icon::after, .tr-phero__pill::before {
	background: linear-gradient(150deg, var(--hue), var(--hue-ink));
	-webkit-mask: var(--tr-theta-icon) center / contain no-repeat;
	mask: var(--tr-theta-icon) center / contain no-repeat;
}
.is-ray .tr-hcard__eyebrow::before, .tr-xlink.is-ray .tr-xlink__title::before, .tr-suite__item.is-ray::after, .tr-eyebrow--agent::before, .tr-agent__icon::after {
	-webkit-mask-image: var(--tr-ray-icon);
	mask-image: var(--tr-ray-icon);
}

/* Button styles: navy, glass (on dark), product colour, outline */
.is-style-navy .wp-block-button__link.wp-element-button { background: var(--tr-navy); }
.is-style-glass .wp-block-button__link.wp-element-button { background: rgba(15, 27, 53, 0.42); border-color: rgba(255, 255, 255, 0.12); -webkit-backdrop-filter: blur(22px) saturate(160%); backdrop-filter: blur(22px) saturate(160%); }
.is-style-hue .wp-block-button__link.wp-element-button { background: linear-gradient(140deg, var(--hue), var(--hue-ink)); box-shadow: 0 14px 30px -14px rgba(15, 27, 53, 0.55); }
.tr-hue-gray .is-style-hue .wp-block-button__link.wp-element-button { background: linear-gradient(140deg, #48587a, var(--hue-ink)); }
.is-style-outline .wp-block-button__link.wp-element-button { background: rgba(255, 255, 255, 0.6); border-color: rgba(56, 136, 255, 0.4); color: var(--tr-blue); }
@media (hover: hover) and (pointer: fine) {
	.is-style-navy .wp-block-button__link.wp-element-button:hover { background: var(--tr-navy-900); box-shadow: none; }
	.is-style-glass .wp-block-button__link.wp-element-button:hover { background: rgba(255, 255, 255, 0.15); box-shadow: none; }
	.is-style-hue .wp-block-button__link.wp-element-button:hover { filter: brightness(1.1); background: linear-gradient(140deg, var(--hue), var(--hue-ink)); }
	.tr-hue-gray .is-style-hue .wp-block-button__link.wp-element-button:hover { background: linear-gradient(140deg, #48587a, var(--hue-ink)); }
	.is-style-outline .wp-block-button__link.wp-element-button:hover { background: rgba(56, 136, 255, 0.06); color: var(--tr-blue); box-shadow: none; }
}

/* ---------- Hub hero: dark receding stage with a video, the Ray orbit or aurora ---------- */
.tr-hstage { overflow: hidden; background: var(--tr-navy-900); color: #fff; }
.tr-hstage__media { position: absolute; inset: 0; overflow: hidden; will-change: transform; }
.tr-hstage__dim { position: absolute; inset: 0; z-index: 2; background: var(--tr-navy-900); opacity: 0; pointer-events: none; }
.tr-hstage--video .tr-hstage__media { background: linear-gradient(180deg, #14224a, #0f1a3d); }
.tr-hstage__video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; pointer-events: none; }
.tr-hstage__shade { position: absolute; inset: 0; z-index: 1; pointer-events: none; }
.tr-hstage__shade--video { background: linear-gradient(90deg, rgba(15, 26, 61, 0.92) 0%, rgba(15, 26, 61, 0.7) 45%, rgba(15, 26, 61, 0.25) 100%); }
.tr-hstage__photo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; pointer-events: none; }
.tr-hstage__shade--photo { background: linear-gradient(90deg, rgba(15, 26, 61, 0.94) 0%, rgba(15, 26, 61, 0.78) 45%, rgba(15, 26, 61, 0.35) 100%); }
.tr-hstage--orbit .tr-hstage__media { background: #0f1a3d; }
.tr-hstage__shade--orbit { background: rgba(15, 26, 61, 0.55); }
@media (min-width: 768px) {
	.tr-hstage__shade--orbit { background: linear-gradient(90deg, #0f1a3d 0, #0f1a3d max(calc(50% + 60px), 700px), rgba(15, 26, 61, 0.72) calc(max(calc(50% + 60px), 700px) + 130px), rgba(15, 26, 61, 0) calc(max(calc(50% + 60px), 700px) + 300px)); }
}
@media (prefers-reduced-motion: reduce) { .tr-hstage__video { display: none; } }
.tr-orbit { position: absolute; top: 0; right: 0; height: 100%; aspect-ratio: 1920 / 905; pointer-events: none; }
@media (max-width: 767px) { .tr-orbit { opacity: 0.5; } }
.tr-orbit__art { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: right; }
.tr-orbit__at { position: absolute; left: 85.2%; top: 61.9%; aspect-ratio: 1; transform: translate(-50%, -50%); }
.tr-orbit__at > span { display: block; width: 100%; height: 100%; border-radius: 50%; }
.tr-orbit__glow { height: 60%; }
.tr-orbit__glow > span { background: radial-gradient(closest-side, rgba(64, 168, 240, 0.38), rgba(64, 168, 240, 0)); animation: rh-glow 6s ease-in-out infinite; }
.tr-orbit__scan { height: 93%; }
.tr-orbit__scan > span {
	mix-blend-mode: screen;
	background: conic-gradient(from 0deg, rgba(96, 216, 255, 0) 0 62%, rgba(96, 216, 255, 0.75) 90%, rgba(255, 255, 255, 0.9) 92%, rgba(96, 216, 255, 0) 93%);
	-webkit-mask: radial-gradient(closest-side, transparent 87%, #000 88%, #000 99%, transparent 100%);
	mask: radial-gradient(closest-side, transparent 87%, #000 88%, #000 99%, transparent 100%);
	animation: rh-spin 9s linear infinite;
}
.tr-orbit__dots { height: 128%; }
.tr-orbit__dots > span { position: relative; border-radius: 0; animation: rh-spin-rev 22s linear infinite; }
.tr-orbit__dots > span::before, .tr-orbit__dots > span::after { content: ""; position: absolute; left: 50%; border-radius: 50%; }
.tr-orbit__dots > span::before { top: 0; width: 10px; height: 10px; margin: -5px 0 0 -5px; background: #fff; box-shadow: 0 0 12px 4px rgba(96, 216, 255, 0.85), 0 0 30px 10px rgba(64, 168, 240, 0.45); }
.tr-orbit__dots > span::after { bottom: 0; width: 6px; height: 6px; margin: 0 0 -3px -3px; background: var(--tr-ray-light); box-shadow: 0 0 10px 3px rgba(96, 216, 255, 0.7); }
.tr-orbit__pulse { height: 80%; }
.tr-orbit__pulse > span { border: 1px solid rgba(96, 216, 255, 0.55); animation: rh-pulse 6s ease-out infinite; }
.tr-orbit__pulse:nth-child(6) > span { animation-delay: 2s; }
.tr-orbit__pulse:nth-child(7) > span { animation-delay: 4s; }
.tr-hstage__content {
	position: relative;
	z-index: 2;
	min-height: 88svh;
	display: flex;
	flex-direction: column;
	justify-content: center;
	padding: 128px 20px 112px;
	will-change: transform, opacity;
}
@media (min-width: 768px) { .tr-hstage__content { min-height: 760px; padding-inline: 48px; } }
body .tr-hstage__eyebrow {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	align-self: flex-start;
	margin-bottom: 28px;
	padding: 6px 16px;
	border: 1px solid rgba(255, 255, 255, 0.12);
	border-radius: 999px;
	background: rgba(15, 27, 53, 0.42);
	-webkit-backdrop-filter: blur(22px) saturate(160%);
	backdrop-filter: blur(22px) saturate(160%);
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: rgba(255, 255, 255, 0.9);
	animation: fade-up 1.2s var(--tr-ease-expo) both;
}
.tr-hstage__eyebrow::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--tr-ray-light); }
body .tr-hstage__title { max-width: 900px; margin: 0; font-size: clamp(42px, 6.8vw, 84px); font-weight: 300; line-height: 1.02; letter-spacing: -0.04em; text-wrap: balance; color: #fff; animation: fade-up 1.2s var(--tr-ease-expo) 80ms both; }
body .tr-hstage__title strong { background: var(--tr-ink-light); -webkit-background-clip: text; background-clip: text; color: transparent; }
body .tr-hstage__sub { max-width: 560px; margin-top: 28px; font-size: 17px; font-weight: 300; line-height: 1.6; color: #dbe6f7; text-wrap: pretty; animation: fade-up 1.2s var(--tr-ease-expo) 260ms both; }
@media (min-width: 768px) { body .tr-hstage__sub { font-size: 20px; } }
.tr-hstage__ctas { margin-top: 40px; animation: fade-up 1.2s var(--tr-ease-expo) 420ms both; }

/* ---------- Product hero: light stage, product-coloured pill and light ---------- */
.tr-phero { overflow: hidden; padding: 128px 20px 80px; background: linear-gradient(180deg, #ffffff, #f2f6fd); }
.tr-phero--pink { background: linear-gradient(180deg, #ffffff, #fbf3f9); }
@media (min-width: 768px) { .tr-phero { padding: 172px 48px 112px; } }
.tr-phero__art { position: absolute; inset: 0; overflow: hidden; pointer-events: none; }
.tr-phero__art > span { position: absolute; border-radius: 50%; filter: blur(90px); }
.tr-phero__art > span:nth-child(2) { right: -10%; top: -30%; width: 720px; height: 720px; background: radial-gradient(closest-side, rgba(var(--hue-rgb), 0.28), transparent); animation: aurora-drift 24s ease-in-out infinite alternate; }
.tr-phero__art > span:nth-child(3) { left: -12%; top: 20%; width: 520px; height: 520px; background: radial-gradient(closest-side, rgba(56, 136, 255, 0.14), transparent); animation: aurora-drift 30s ease-in-out infinite alternate-reverse; }
.tr-phero__inner { position: relative; display: flex; flex-direction: column; align-items: flex-start; }
.tr-phero__inner > * { max-width: 100%; }
/* (body .tr-phero prefix: outranks the layout rule that drops a first child's top margin) */
body .tr-phero .tr-phero__pill {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	margin-top: 24px;
	padding: 6px 16px;
	border: 1px solid rgba(255, 255, 255, 0.6);
	border-radius: 999px;
	background: rgba(255, 255, 255, 0.72);
	-webkit-backdrop-filter: blur(22px) saturate(180%);
	backdrop-filter: blur(22px) saturate(180%);
	box-shadow: 0 8px 24px -12px rgba(15, 27, 53, 0.25);
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	white-space: nowrap;
	color: var(--hue-ink);
	animation: fade-up 1.2s var(--tr-ease-expo) 60ms both;
}
.tr-phero__pill::before { content: ""; width: 16px; height: 16px; flex: none; }
.tr-phero__pill.is-ray { color: #1a5fc4; }
.tr-phero__pill.is-ray::before { background: var(--tr-ray-icon) center / contain no-repeat; -webkit-mask: none; mask: none; }
body .tr-phero__title { max-width: 1000px; margin-top: 28px; font-size: clamp(40px, 6.6vw, 84px); font-weight: 300; line-height: 1.02; letter-spacing: -0.042em; text-wrap: balance; color: var(--tr-navy); animation: fade-up 1.2s var(--tr-ease-expo) 140ms both; }
body .tr-phero__sub { max-width: 700px; margin-top: 28px; font-size: 17px; font-weight: 300; line-height: 1.6; color: var(--tr-body); text-wrap: pretty; animation: fade-up 1.2s var(--tr-ease-expo) 280ms both; }
@media (min-width: 768px) { body .tr-phero__sub { font-size: 20px; } }
body .tr-phero__bullet {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	margin-top: 24px;
	padding: 8px 16px;
	border-radius: 999px;
	background: rgba(255, 255, 255, 0.7);
	box-shadow: 0 1px 0 rgba(255, 255, 255, 0.9) inset, 0 6px 20px -10px rgba(15, 27, 53, 0.3);
	font-size: 14px;
	font-weight: 600;
	color: var(--tr-navy);
	animation: fade-up 1.2s var(--tr-ease-expo) 380ms both;
}
@media (min-width: 768px) { body .tr-phero__bullet { font-size: 15px; } }
.tr-phero__bullet::before { content: ""; flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--tr-pink); animation: ring-pink 2.4s ease-out infinite; }
.tr-phero__ctas { margin-top: 40px; animation: fade-up 1.2s var(--tr-ease-expo) 480ms both; }
@media (max-width: 639px) { .tr-phero__ctas, .tr-phero__ctas > .wp-block-button, .tr-phero__ctas .wp-block-button__link { width: 100%; } }
/* Theta Monitor: the data field and its typology callouts */
.tr-datafield { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.tr-alerts { position: absolute; inset: 0; z-index: 1; display: none; pointer-events: none; }
@media (min-width: 1024px) { .tr-alerts { display: block; } }
.tr-alert { position: absolute; width: 292px; opacity: 0; animation: alert-cycle 25s cubic-bezier(0.16, 1, 0.3, 1) infinite both; }
.tr-alert:nth-child(1) { right: 5%; top: 17%; animation-delay: -0.4s; }
.tr-alert:nth-child(2) { right: 11%; top: 62%; animation-delay: 4.6s; }
.tr-alert:nth-child(3) { right: 30%; top: 73%; animation-delay: 9.6s; }
.tr-alert:nth-child(4) { right: 3%; top: 40%; animation-delay: 14.6s; }
.tr-alert:nth-child(5) { right: 22%; top: 13%; animation-delay: 19.6s; }
.tr-alert__card { display: flex; align-items: center; gap: 14px; padding: 14px 16px 14px 14px; border: 1px solid rgba(255, 255, 255, 0.8); border-radius: 18px; background: rgba(255, 255, 255, 0.85); box-shadow: 0 24px 48px -20px rgba(15, 27, 53, 0.35); -webkit-backdrop-filter: blur(24px); backdrop-filter: blur(24px); }
.tr-alert svg { flex: none; }
.tr-alert line { stroke: #9fb4d8; stroke-width: 1; }
.tr-alert circle { fill: #3888ff; opacity: 0.75; }
.tr-alert circle.is-hub { fill: #f5013e; opacity: 1; }
.tr-alert circle.is-ring { fill: none; stroke: #f5013e; stroke-width: 1.5; opacity: 1; transform-origin: 30px 26px; animation: tr-ring 2.4s ease-out infinite; }
.tr-alert__copy { min-width: 0; }
.tr-alert__status { display: inline-flex; align-items: center; gap: 6px; padding: 2px 8px; border-radius: 999px; background: rgba(245, 1, 62, 0.1); font-size: 10px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: #d4003a; }
.tr-alert__status::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: #f5013e; }
.tr-alert__label { display: block; margin-top: 6px; font-size: 14px; font-weight: 700; line-height: 1.25; letter-spacing: -0.01em; color: var(--tr-navy); }
.tr-alert__meta { display: block; margin-top: 4px; font-size: 12px; line-height: 1.35; color: var(--tr-muted-2); }
@media (prefers-reduced-motion: reduce) {
	.tr-alert { display: none; animation: none; }
	.tr-alert:nth-child(1) { display: block; opacity: 1; }
}

/* ---------- Stats: the homepage tiles in a Ray tint and 3 or 4 columns; light cards ---------- */
@media (min-width: 1024px) {
	.tr-stats--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
	.tr-stats--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
.tr-outcomes--ray { background: linear-gradient(180deg, #ffffff 0%, #f3fbff 50%, #eaf7ff 100%); }
.tr-outcomes--ray::before { background: radial-gradient(closest-side, rgba(96, 216, 255, 0.22), transparent); }
.tr-outcomes--ray::after { background: radial-gradient(closest-side, rgba(64, 168, 240, 0.14), transparent); }
.tr-outcomes--ray .tr-stat { background: linear-gradient(160deg, #f4fcff 0%, #e6f7ff 55%, #d9f2fe 100%); box-shadow: 0 1px 0 rgba(255, 255, 255, 0.95) inset, 0 24px 48px -30px rgba(64, 168, 240, 0.55), 0 0 0 1px rgba(64, 168, 240, 0.2); }
body .tr-outcomes--ray .tr-stat__value { background: none; -webkit-text-fill-color: currentColor; color: var(--tr-navy); }
.tr-sgrid { padding: 80px 20px; background: linear-gradient(180deg, #eef3fb, #f7f9fd); }
@media (min-width: 768px) { .tr-sgrid { padding: 112px 48px; } }
body .tr-sgrid__title { margin-bottom: 40px; font-size: clamp(32px, 4.6vw, 56px); }
@media (min-width: 768px) { body .tr-sgrid__title { margin-bottom: 56px; } }
.tr-sgrid__list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
@media (min-width: 768px) { .tr-sgrid__list { grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 16px; } }
.tr-sgrid__item { display: flex; flex-direction: column; padding: 32px 24px; border-radius: 24px; }
body .tr-sgrid__value { font-size: clamp(34px, 4vw, 48px); font-weight: 700; line-height: 1; letter-spacing: -0.045em; background: var(--tr-ink); -webkit-background-clip: text; background-clip: text; color: transparent; }
body .is-wordy .tr-sgrid__value { font-size: clamp(21px, 2.4vw, 34px); }
/* Units stay full size here (the site only shrinks them on the tinted stat tiles). */
.tr-sgrid__value .tr-stat__unit { font-size: inherit; letter-spacing: inherit; }
body .tr-sgrid__label { margin-top: 16px; font-size: 14px; line-height: 1.45; color: var(--tr-body-2); }
@media (min-width: 768px) { body .tr-sgrid__label { font-size: 15px; } }
body .tr-sgrid__note { margin-top: 24px; font-size: 14px; color: var(--tr-muted); }

/* ---------- Customer story cards ---------- */
.tr-scards { padding: 96px 20px; background: #fff; }
@media (min-width: 768px) { .tr-scards { padding: 128px 48px; } }
body .tr-scards__title { margin-bottom: 40px; font-size: clamp(34px, 5vw, 60px); }
@media (min-width: 768px) { body .tr-scards__title { margin-bottom: 48px; } }
.tr-scards__grid { display: grid; gap: 16px; }
@media (min-width: 640px) { .tr-scards__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 768px) { .tr-scards__grid { gap: 20px; } }
@media (min-width: 1024px) { .tr-scards__grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.tr-scard { --spot: rgba(var(--hue-rgb), 0.1); display: flex; flex-direction: column; overflow: hidden; border-radius: 28px; color: var(--tr-navy-900); }
.tr-scard__media { position: relative; height: 176px; overflow: hidden; background: var(--tr-surface); }
@media (min-width: 768px) { .tr-scard__media { height: 192px; } }
body .tr-scard__img { position: absolute; inset: 0; margin: 0; }
.tr-scard__img img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 1.4s var(--tr-ease-expo); }
.tr-pos-35-center img { object-position: 35% center; }
.tr-pos-70-center img { object-position: 70% center; }
.tr-scard:hover .tr-scard__img img { transform: scale(1.06); }
.tr-scard__blank { position: absolute; inset: 0; background: linear-gradient(135deg, rgba(56, 136, 255, 0.16), rgba(96, 216, 255, 0.08) 60%, transparent); }
.tr-scard__body { display: flex; flex: 1; flex-direction: column; padding: 28px; }
body .tr-scard__company { font-size: 12px; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: var(--tr-blue-ink); }
body .tr-scard__title { margin: 12px 0 24px; font-size: 19px; font-weight: 600; line-height: 1.3; letter-spacing: -0.015em; text-wrap: pretty; color: var(--tr-navy-900); }
.tr-scard__result { display: flex; flex-direction: column; gap: 6px; margin-top: auto; padding-top: 20px; border-top: 1px solid rgba(34, 58, 117, 0.08); }
body .tr-scard__value { align-self: flex-start; padding-right: 2px; font-size: 30px; font-weight: 700; line-height: 1; letter-spacing: -0.04em; white-space: nowrap; background: var(--tr-ink); -webkit-background-clip: text; background-clip: text; color: transparent; }
body .tr-scard__value-label { font-size: 13px; line-height: 1.4; color: var(--tr-body-2); }
.tr-scard__foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding-top: 24px; }
body .tr-scard__scale { font-size: 12px; font-weight: 500; color: var(--tr-muted-2); }
body .tr-scard__link { font-size: 14px; font-weight: 600; color: var(--tr-blue-ink); }
.tr-scard__link a { color: inherit; text-decoration: none; }
.tr-scard__link a::after { content: "→"; display: inline-block; transition: transform 0.4s var(--tr-ease-expo); }
.tr-scard:hover .tr-scard__link a::after { transform: translateX(4px); }

/* ---------- Awards marquee ---------- */
.tr-awards { padding: 80px 0 24px; background: #fff; }
@media (min-width: 768px) { .tr-awards { padding-top: 112px; } }
.tr-awards > .tr-container { margin-bottom: 32px; padding-inline: 20px; }
@media (min-width: 768px) { .tr-awards > .tr-container { padding-inline: 48px; } }
body .tr-awards__title { font-size: clamp(30px, 4vw, 48px); }
.tr-marquee--awards { display: flex; }
.tr-marquee--awards .tr-marquee__track { gap: 20px; padding: 8px 0 40px; }
.tr-award { flex: none; display: flex; align-items: center; gap: 20px; width: 310px; padding: 20px 24px; border-radius: 24px; }
@media (min-width: 768px) { .tr-award { width: 360px; } }
body .tr-award__badge { flex: none; display: flex; align-items: center; justify-content: center; width: 92px; height: 92px; margin: 0; padding: 6px; border-radius: 20px; background: #fff; box-shadow: 0 10px 24px -16px rgba(15, 27, 53, 0.45), 0 0 0 1px rgba(34, 58, 117, 0.08); }
.tr-award__badge img { width: 100%; height: 100%; object-fit: contain; }
.tr-award__copy { display: flex; min-width: 0; flex-direction: column; gap: 4px; }
body .tr-award__org { font-size: 11px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--tr-muted-2); }
body .tr-award__name { font-size: 15px; font-weight: 700; line-height: 1.3; text-wrap: pretty; color: var(--tr-navy); }

/* ---------- Hub cards: one engine or agent per row ---------- */
.tr-hcards { padding: 48px 20px 96px; background: #fff; }
@media (min-width: 768px) { .tr-hcards { padding: 64px 48px 128px; } }
.tr-hcards__list { display: grid; gap: 20px; }
@media (min-width: 768px) { .tr-hcards__list { gap: 24px; } }
.tr-hcard { --spot: rgba(var(--hue-rgb), 0.12); display: grid; overflow: hidden; border-radius: 32px; color: var(--tr-navy); }
@media (min-width: 768px) { .tr-hcard { grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); } }
.tr-hcard::after { content: ""; position: absolute; left: -96px; top: -96px; z-index: -1; width: 288px; height: 288px; border-radius: 50%; background: rgba(var(--hue-rgb), 0.18); filter: blur(64px); pointer-events: none; transition: transform 0.7s var(--tr-ease-expo); }
.tr-hcard:hover::after { transform: scale(1.1); }
.tr-hcard__main { position: relative; padding: 32px; }
@media (min-width: 768px) {
	.tr-hcard__main { padding: 48px; }
	.tr-hcard__main::after { content: ""; position: absolute; left: -40px; bottom: -64px; z-index: -1; width: 220px; height: 220px; opacity: 0.05; background: linear-gradient(150deg, var(--hue), var(--hue-ink)); -webkit-mask: var(--tr-theta-icon) center / contain no-repeat; mask: var(--tr-theta-icon) center / contain no-repeat; pointer-events: none; }
	.tr-hcard.is-ray .tr-hcard__main::after { -webkit-mask-image: var(--tr-ray-icon); mask-image: var(--tr-ray-icon); }
}
body .tr-hcard__eyebrow { display: flex; align-items: center; gap: 12px; margin-bottom: 24px; font-size: 12px; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase; color: var(--hue-ink); }
.tr-hcard__eyebrow::before { content: ""; width: 36px; height: 36px; flex: none; }
body .tr-hcard__title { font-size: clamp(30px, 3.6vw, 46px); font-weight: 700; line-height: 1.05; letter-spacing: -0.035em; color: var(--tr-navy); }
body .tr-hcard__body { max-width: 560px; margin-top: 16px; font-size: 17px; font-weight: 300; line-height: 1.6; color: var(--tr-body); }
@media (min-width: 768px) { body .tr-hcard__body { font-size: 19px; } }
.tr-hcard__outcomes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px 32px; max-width: 560px; margin-top: 28px; }
body .tr-hcard__ovalue { font-size: clamp(22px, 2.1vw, 28px); font-weight: 700; line-height: 1.1; letter-spacing: -0.03em; text-wrap: balance; color: var(--hue-ink); }
body .tr-hcard__olabel { margin-top: 8px; font-size: 13px; line-height: 1.45; color: var(--tr-body-3); }
body .tr-hcard__note { margin-top: 24px; font-size: 14px; line-height: 1.5; color: var(--tr-muted-2); }
.tr-hcard__side { position: relative; display: flex; flex-direction: column; justify-content: center; gap: 12px; padding: 32px; border-top: 1px solid rgba(34, 58, 117, 0.07); background: rgba(245, 248, 253, 0.6); }
@media (min-width: 768px) { .tr-hcard__side { padding: 48px; border-top: 0; border-left: 1px solid rgba(34, 58, 117, 0.07); } }
.tr-hcard__modes { display: flex; flex-direction: column; gap: 12px; }
body .tr-hcard__mode { display: flex; align-items: center; gap: 16px; padding: 16px 20px; border-radius: 16px; background: #fff; box-shadow: 0 10px 24px -18px rgba(15, 27, 53, 0.45), 0 0 0 1px rgba(34, 58, 117, 0.06); font-size: 16px; font-weight: 600; }
body .tr-hcard__mode.is-bullet { align-items: flex-start; padding-block: 20px; font-size: 17px; line-height: 1.45; text-wrap: pretty; }
.tr-hcard__mode::before { content: ""; flex: none; width: 32px; height: 32px; border-radius: 50%; background: var(--tr-check-white) center / 14px no-repeat, linear-gradient(140deg, var(--hue), var(--hue-ink)); }
.tr-hcard__mode.is-bullet::before { margin-top: 3px; }
body .tr-hcard__cta { align-self: flex-start; margin-top: 16px; }
.tr-hcard__cta a { display: inline-flex; align-items: center; gap: 8px; padding: 12px 24px; border-radius: 999px; background: linear-gradient(140deg, var(--hue), var(--hue-ink)); box-shadow: 0 14px 30px -14px rgba(15, 27, 53, 0.6); font-size: 15px; font-weight: 600; color: #fff; text-decoration: none; transition: transform 0.5s var(--tr-ease-expo); }

/* ---------- Cross-hub band: the other hub's offer and its links ---------- */
.tr-xhub { padding: 0 20px 80px; background: #fff; }
@media (min-width: 768px) { .tr-xhub { padding: 0 48px 112px; } }
.tr-xhub__card { position: relative; isolation: isolate; display: grid; align-items: center; gap: 40px; overflow: hidden; padding: 48px 24px; border-radius: 36px; background: linear-gradient(135deg, #eef3fb, #f7f4fb); }
@media (min-width: 768px) { .tr-xhub__card { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 56px; padding: 64px 56px; } }
.tr-xhub__card::before { content: ""; position: absolute; left: -96px; top: -96px; z-index: -1; width: 320px; height: 320px; border-radius: 50%; filter: blur(64px); background: rgba(34, 58, 117, 0.18); }
.tr-xhub--ray .tr-xhub__card::before { background: rgba(64, 168, 240, 0.25); }
.tr-xhub__copy .tr-eyebrow { margin-bottom: 16px; color: var(--tr-navy); }
.tr-xhub--ray .tr-xhub__copy .tr-eyebrow { color: #1a5fc4; }
body .tr-xhub__title { margin-bottom: 16px; font-size: clamp(30px, 4vw, 48px); line-height: 1.05; }
body .tr-xhub__body { margin-bottom: 32px; font-size: 16px; font-weight: 300; line-height: 1.65; color: var(--tr-body); }
@media (min-width: 768px) { body .tr-xhub__body { font-size: 17px; } }
.tr-xhub__links { position: relative; display: grid; gap: 10px; }
.tr-xlink { position: relative; display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 64px; padding: 16px 20px; border-radius: 18px; background: rgba(255, 255, 255, 0.8); box-shadow: 0 10px 30px -18px rgba(15, 27, 53, 0.4), 0 0 0 1px #fff; color: var(--tr-navy); }
.tr-xlink.is-visible { transition: transform 0.5s var(--tr-ease-expo), box-shadow 0.5s var(--tr-ease-expo), opacity 0.9s var(--tr-ease-expo) var(--reveal-delay, 0ms), filter 0.9s var(--tr-ease-expo) var(--reveal-delay, 0ms); }
.tr-xlink.is-visible:hover { transform: translateX(4px); box-shadow: 0 18px 40px -18px rgba(15, 27, 53, 0.45), 0 0 0 1px #fff; }
body .tr-xlink__title { display: flex; align-items: center; gap: 12px; font-size: 15px; font-weight: 600; text-wrap: wrap; }
.tr-xlink__title::before { content: ""; width: 18px; height: 18px; flex: none; }
.tr-xlink__title a { color: inherit; text-decoration: none; }
body .tr-xlink__note { display: flex; align-items: center; gap: 12px; font-size: 12px; text-align: right; color: var(--tr-muted-2); }
.tr-xlink__note::after { content: "→"; display: inline-block; font-size: 14px; color: var(--tr-navy); transition: transform 0.4s var(--tr-ease-expo); }
.tr-xlink:hover .tr-xlink__note::after { transform: translateX(4px); }

/* ---------- Values grid ("titled": tinted title band per card) ---------- */
.tr-values { overflow: hidden; padding: 96px 20px; background: linear-gradient(180deg, #f5f8fd, #ffffff); }
@media (min-width: 768px) { .tr-values { padding: 128px 48px; } }
.tr-values__intro { max-width: 860px; margin-bottom: 48px; }
@media (min-width: 768px) { .tr-values__intro { margin-bottom: 64px; } }
body .tr-values__title { margin: 20px 0; font-size: clamp(34px, 5.2vw, 64px); line-height: 1.02; letter-spacing: -0.045em; }
.tr-values__grid { display: grid; gap: 16px; }
@media (min-width: 768px) { .tr-values__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .tr-values__grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } .tr-values__grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.tr-vcard { display: flex; flex-direction: column; overflow: hidden; border-radius: 28px; background: #fff; box-shadow: 0 24px 48px -32px rgba(15, 27, 53, 0.35), 0 0 0 1px rgba(34, 58, 117, 0.07); }
.tr-vcard__top { position: relative; display: flex; overflow: hidden; padding: 36px 28px 28px; background: linear-gradient(140deg, #f3f8ff 0%, #e3eeff 60%, #d6e6ff 100%); }
.tr-values--pink .tr-vcard__top { background: linear-gradient(140deg, #fff4fa 0%, #fde6f2 60%, #fbdcee 100%); }
@media (min-width: 768px) { .tr-vcard__top { min-height: 140px; align-items: flex-end; padding-inline: 32px; } }
.tr-vcard__top.has-icon { flex-direction: column; align-items: flex-start; gap: 20px; }
@media (min-width: 768px) { .tr-vcard__top.has-icon { min-height: 0; align-items: flex-start; } }
.tr-vcard__icon { position: relative; z-index: 1; margin: 0; }
.tr-vcard__icon img { width: 56px; height: 56px; object-fit: contain; filter: drop-shadow(0 10px 18px rgba(34, 58, 117, 0.22)); }
.tr-vcard__top::after { content: ""; position: absolute; right: -48px; top: -56px; width: 144px; height: 144px; border-radius: 50%; background: radial-gradient(closest-side, rgba(255, 255, 255, 0.85), transparent); transition: transform 0.7s var(--tr-ease-expo); }
.tr-vcard:hover .tr-vcard__top::after { transform: scale(1.25); }
body .tr-vcard__title { position: relative; font-size: 24px; font-weight: 700; line-height: 1.15; letter-spacing: -0.03em; text-wrap: balance; color: var(--tr-navy); }
@media (min-width: 768px) { body .tr-vcard__title { font-size: 26px; } }
body .tr-vcard__body { padding: 24px 28px 32px; font-size: 15px; line-height: 1.65; color: var(--tr-body-3); }
@media (min-width: 768px) { body .tr-vcard__body { padding-inline: 32px; } }
body .tr-vcard__body:has(+ .tr-vcard__tag) { padding-bottom: 20px; }
body .tr-vcard .tr-vcard__tag { display: inline-flex; align-items: center; gap: 8px; width: fit-content; margin: auto 28px 32px; padding: 6px 12px; border-radius: 999px; background: #eaf2ff; font-size: 11px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--tr-blue-ink); }
.tr-values--pink .tr-vcard__tag { background: #fdebf5; color: #c40080; }
.tr-vcard__tag::before { content: ""; width: 11px; height: 11px; flex: none; background: currentColor; -webkit-mask: var(--tr-check-mask) center / contain no-repeat; mask: var(--tr-check-mask) center / contain no-repeat; }
@media (min-width: 768px) { body .tr-vcard .tr-vcard__tag { margin-inline: 32px; } }

/* ---------- Award banner ---------- */
.tr-abanner { padding: 48px 20px 16px; background: #fff; }
@media (min-width: 768px) { .tr-abanner { padding-inline: 48px; } }
.tr-abanner__card { display: flex; flex-wrap: wrap; align-items: center; gap: 24px; padding: 24px; border-radius: 28px; }
@media (min-width: 768px) { .tr-abanner__card { gap: 32px; padding: 32px 36px; } }
body .tr-abanner__badge { flex: none; width: 104px; height: 104px; margin: 0; }
.tr-abanner__badge img { width: 100%; height: 100%; object-fit: contain; filter: drop-shadow(0 14px 24px rgba(15, 27, 53, 0.2)); }
.tr-abanner__copy { display: flex; min-width: 0; flex: 1 1 420px; flex-direction: column; gap: 8px; }
body .tr-abanner__eyebrow { font-size: 11px; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase; color: var(--tr-ray-ink); }
body .tr-abanner__text { font-size: 20px; font-weight: 300; line-height: 1.3; letter-spacing: -0.02em; text-wrap: pretty; color: var(--tr-navy); }
@media (min-width: 768px) { body .tr-abanner__text { font-size: 24px; } }

/* ---------- Video feature ---------- */
.tr-vfeature { padding: 64px 20px 24px; background: #fff; }
@media (min-width: 768px) { .tr-vfeature { padding: 96px 48px 24px; } }
.tr-vfeature__grid { display: grid; align-items: center; gap: 40px; }
@media (min-width: 768px) { .tr-vfeature__grid { grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.8fr); gap: 56px; } }
.tr-vplayer { position: relative; isolation: isolate; aspect-ratio: 16 / 9; min-width: 0; border-radius: 28px; background: var(--tr-navy-900); box-shadow: 0 50px 100px -40px rgba(15, 27, 53, 0.6), 0 0 0 1px rgba(0, 0, 0, 0.05); }
.tr-vplayer::before { content: ""; position: absolute; inset: -24px; z-index: -1; border-radius: 44px; background: radial-gradient(closest-side, rgba(64, 168, 240, 0.3), transparent); filter: blur(40px); }
.tr-vplayer .tr-video__thumb { overflow: hidden; border-radius: inherit; }
.tr-vplayer iframe { position: absolute; inset: 0; z-index: 4; width: 100%; height: 100%; border: 0; border-radius: inherit; }
.tr-vfeature--ray .tr-vplayer .tr-video__thumb a::after {
	width: 76px;
	height: 76px;
	margin: -38px 0 0 -38px;
	border: 0;
	background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 21 26'%3E%3Cpath d='M0 0l21 13-21 13z' fill='%23fff'/%3E%3C/svg%3E") 58% 50% / 21px 26px no-repeat, var(--tr-ray);
	-webkit-backdrop-filter: none;
	backdrop-filter: none;
	box-shadow: 0 12px 30px rgba(64, 168, 240, 0.45);
	transition-duration: 0.2s;
}
.tr-vplayer:hover .tr-video__thumb a::after { transform: scale(1.1); }
.tr-vfeature__copy { min-width: 0; }
.tr-vfeature__copy .tr-eyebrow--ray { color: #1a73b8; }
body .tr-vfeature__title { margin-top: 20px; font-size: clamp(32px, 4.4vw, 54px); line-height: 1.04; letter-spacing: -0.045em; }
.tr-vfeature__copy .tr-lead { margin-top: 20px; }

/* ---------- Comparison: pain point, today, with Ray ---------- */
.tr-compare { padding: 96px 20px; background: #fff; counter-reset: tr-compare; }
@media (min-width: 768px) { .tr-compare { padding: 128px 48px; } }
.tr-compare__intro { max-width: 820px; margin-bottom: 48px; }
@media (min-width: 768px) { .tr-compare__intro { margin-bottom: 56px; } }
.tr-compare__intro .tr-eyebrow--ray { color: #1a5fc4; }
body .tr-compare__title { margin: 20px 0 16px; font-size: clamp(34px, 5vw, 60px); line-height: 1.03; letter-spacing: -0.045em; }
.tr-compare__head { display: none; }
@media (min-width: 768px) {
	.tr-compare__head { display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1fr) minmax(0, 1.2fr); gap: 12px; margin-bottom: 12px; padding-inline: 4px; }
}
body .tr-compare__label { padding-left: 20px; font-size: 11px; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase; color: var(--tr-muted-2); }
body .tr-compare__label:first-child { padding-left: 16px; }
body .tr-compare__label.is-after { color: var(--tr-blue-ink); }
.tr-compare__rows { display: grid; gap: 12px; }
.tr-compare__row { display: grid; gap: 8px; counter-increment: tr-compare; }
@media (min-width: 768px) { .tr-compare__row { grid-template-columns: minmax(0, 0.8fr) minmax(0, 1fr) minmax(0, 1.2fr); gap: 12px; } }
body .tr-compare__pain { display: flex; align-items: center; gap: 14px; padding: 16px; border-radius: 18px; background: var(--tr-surface); font-size: 16px; font-weight: 700; line-height: 1.3; letter-spacing: -0.01em; color: var(--tr-navy); }
.tr-compare__pain::before { content: counter(tr-compare); flex: none; display: flex; align-items: center; justify-content: center; width: 32px; height: 32px; border-radius: 50%; background: linear-gradient(140deg, #3888ff, #1a5fc4); font-size: 13px; font-weight: 700; letter-spacing: 0; color: #fff; }
body .tr-compare__today { display: flex; flex-direction: column; justify-content: center; padding: 16px 20px; border-radius: 18px; box-shadow: inset 0 0 0 1px rgba(34, 58, 117, 0.1); font-size: 15px; line-height: 1.5; color: var(--tr-body-3); }
body .tr-compare__after { position: relative; padding: 16px 20px 16px 56px; border-radius: 18px; background: linear-gradient(150deg, #f1f6ff, #e3edff); box-shadow: inset 0 0 0 1px rgba(56, 136, 255, 0.16); font-size: 15px; font-weight: 500; line-height: 1.5; color: var(--tr-navy); }
.tr-compare__after::before { content: ""; position: absolute; left: 20px; top: 18px; width: 24px; height: 24px; border-radius: 50%; background: var(--tr-check-blue) center / 14px no-repeat, #fff; }
.tr-compare__mlabel { display: block; margin-bottom: 4px; font-size: 10px; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: var(--tr-muted-2); }
.tr-compare__after .tr-compare__mlabel { color: var(--tr-blue-ink); }
@media (min-width: 768px) { .tr-compare__mlabel { display: none; } }
body .tr-compare__closing { margin-top: 48px; font-size: clamp(22px, 2.6vw, 32px); font-weight: 300; line-height: 1.25; letter-spacing: -0.025em; color: var(--tr-navy); }
.tr-compare__closing strong { background: var(--tr-ink); -webkit-background-clip: text; background-clip: text; color: transparent; }

/* ---------- Live decisioning: visual, decision feed, counter ---------- */
.tr-live { overflow: hidden; padding: 96px 20px; background: linear-gradient(180deg, #ffffff, #eef3fb); }
@media (min-width: 768px) { .tr-live { padding: 128px 48px; } }
.tr-live::before { content: ""; position: absolute; left: -160px; bottom: 0; width: 560px; height: 560px; border-radius: 50%; filter: blur(64px); background: radial-gradient(closest-side, rgba(var(--hue-rgb), 0.14), transparent); pointer-events: none; }
.tr-live > .tr-container { position: relative; }
.tr-live__intro { max-width: 820px; margin-bottom: 48px; }
@media (min-width: 768px) { .tr-live__intro { margin-bottom: 64px; } }
body .tr-live__title { margin: 20px 0; font-size: clamp(34px, 5.4vw, 64px); line-height: 1.02; letter-spacing: -0.045em; }
.tr-live__grid { display: grid; align-items: stretch; gap: 20px; }
@media (min-width: 768px) { .tr-live__grid { gap: 24px; } }
@media (min-width: 1024px) { .tr-live__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.tr-live__visual, .tr-split__visual { position: relative; min-width: 0; }
.tr-live__visual::before { content: ""; position: absolute; inset: -24px; border-radius: 36px; filter: blur(40px); background: radial-gradient(closest-side, rgba(var(--hue-rgb), 0.22), transparent); pointer-events: none; }
.tr-live__visual > .tr-visual, .tr-split__visual > .tr-visual { position: relative; height: 100%; min-height: 340px; overflow: hidden; border-radius: 28px; background-color: #fff; box-shadow: 0 40px 80px -40px rgba(15, 27, 53, 0.5), 0 0 0 1px rgba(0, 0, 0, 0.05); }
.tr-live__metrics { padding: 32px 24px; border-radius: 28px; }
@media (min-width: 768px) { .tr-live__metrics { padding: 40px 36px; } }
body .tr-live__mtitle { margin-bottom: 24px; font-size: 12px; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase; color: var(--tr-muted-2); }
.tr-live__metric { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; padding: 16px 0; border-bottom: 1px solid rgba(34, 58, 117, 0.07); }
.tr-live__metric:last-child { border-bottom: 0; }
body .tr-live__mlabel { font-size: 15px; font-weight: 500; color: var(--tr-navy); }
body .tr-live__mvalue { font-size: 24px; font-weight: 700; letter-spacing: -0.03em; white-space: nowrap; background: var(--tr-ink); -webkit-background-clip: text; background-clip: text; color: transparent; }
@media (min-width: 768px) { body .tr-live__mvalue { font-size: 28px; } }
.tr-live__side { display: grid; min-width: 0; gap: 16px; }
.tr-live__feed { padding: 24px 20px; border-radius: 28px; }
@media (min-width: 768px) { .tr-live__feed { padding: 28px; } }
.tr-live__head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 16px; }
body .tr-live__ftitle { font-size: 12px; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--tr-muted-2); }
body .tr-live__badge { display: inline-flex; align-items: center; gap: 8px; padding: 4px 10px; border-radius: 999px; background: rgba(var(--hue-rgb), 0.08); font-size: 12px; font-weight: 600; color: var(--hue-ink); }
.tr-live__badge::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--hue); animation: ring-hue 1.6s ease-out infinite; }
.tr-feed { display: grid; gap: 10px; }
.tr-feed__row { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "label status" "meta status"; align-items: center; column-gap: 12px; row-gap: 3px; padding: 12px 14px; border: 1px solid rgba(34, 58, 117, 0.08); border-radius: 12px; background: var(--tr-surface); }
.tr-feed__row.is-new { animation: feed-in 0.55s var(--tr-ease-expo); }
body .tr-feed__label { grid-area: label; font-size: 13px; font-weight: 600; overflow-wrap: anywhere; color: var(--tr-navy); }
body .tr-feed__meta { grid-area: meta; font-size: 11px; color: var(--tr-muted-2); }
body .tr-feed__status { grid-area: status; padding: 4px 9px; border: 1px solid currentColor; border-radius: 999px; font-size: 11px; font-weight: 700; letter-spacing: 0.06em; white-space: nowrap; }
.is-review .tr-feed__status { color: #8a6414; }
.is-cleared .tr-feed__status { color: #15784f; }
.is-escalated .tr-feed__status { color: #1a5fc4; }
.is-blocked .tr-feed__status { color: #c8002f; }
.tr-live__tiles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.tr-live__counter, .tr-live__highlight { padding: 20px; border-radius: 24px; }
@media (min-width: 768px) { .tr-live__counter, .tr-live__highlight { padding-inline: 24px; } }
body .tr-live__count { font-size: 24px; font-weight: 300; letter-spacing: -0.03em; font-variant-numeric: tabular-nums; color: var(--tr-navy); }
@media (min-width: 768px) { body .tr-live__count { font-size: 32px; } }
body .tr-live__cnote { margin-top: 4px; font-size: 12px; color: var(--tr-muted-2); }
.tr-live__highlight { position: relative; overflow: hidden; background: linear-gradient(140deg, var(--hue), #223a75); color: #fff; }
.tr-hue-gray .tr-live__highlight { background: linear-gradient(140deg, #48587a, #223a75); }
.tr-live__highlight::before { content: ""; position: absolute; right: -32px; top: -32px; width: 112px; height: 112px; border-radius: 50%; background: rgba(255, 255, 255, 0.2); filter: blur(40px); }
body .tr-live__hvalue { position: relative; font-size: 22px; font-weight: 700; letter-spacing: -0.03em; color: #fff; }
@media (min-width: 768px) { body .tr-live__hvalue { font-size: 28px; } }
body .tr-live__hnote { position: relative; margin-top: 4px; font-size: 12px; color: rgba(255, 255, 255, 0.8); }

/* ---------- Steps: sticky heading beside the scroll-lit steps (product colour) ---------- */
.tr-psteps { padding: 96px 20px; background: #fff; }
@media (min-width: 768px) { .tr-psteps { padding: 128px 48px; } }
.tr-psteps__grid { display: grid; gap: 48px; }
@media (min-width: 768px) {
	.tr-psteps__grid { grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr); gap: 80px; }
	.tr-psteps__title { position: sticky; top: 144px; align-self: start; }
}
body .tr-psteps__title { font-size: clamp(34px, 4.8vw, 60px); line-height: 1.04; letter-spacing: -0.045em; }
.tr-psteps .tr-steps { --step: var(--hue); --step-ink: var(--hue-ink); }
.tr-psteps.tr-hue-gray .tr-steps { --step: #3888ff; }
.tr-steps--md .tr-step { padding: 17px 21px; }
@media (min-width: 768px) { .tr-steps--md .tr-step { padding: 21px 25px; } }
body .tr-steps--md .tr-step__title { font-size: 15px; }
body .tr-steps--md .tr-step__body { font-size: 14px; }
@media (min-width: 768px) { body .tr-steps--md .tr-step__title { font-size: 16px; } body .tr-steps--md .tr-step__body { font-size: 15px; } }

/* ---------- Ray agent overlay: light stage in the product's colour family ---------- */
.tr-agent { padding: 80px 20px; background: #fff; }
@media (min-width: 768px) { .tr-agent { padding: 112px 48px; } }
.tr-agent__stage { position: relative; isolation: isolate; display: grid; align-items: center; gap: 40px; overflow: hidden; padding: 56px 24px; border-radius: 36px; background: linear-gradient(135deg, #f5f9ff, #e6effd 55%, #d9e7fd); box-shadow: inset 0 0 0 1px rgba(56, 136, 255, 0.1); }
.tr-agent--pink .tr-agent__stage { background: linear-gradient(135deg, #fff7fb, #fbe6f1 55%, #f3ddee); box-shadow: inset 0 0 0 1px rgba(196, 0, 128, 0.08); }
@media (min-width: 768px) { .tr-agent__stage { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 56px; padding: 80px 56px; } }
.tr-agent__stage::before { content: ""; position: absolute; right: -80px; top: -80px; z-index: -1; width: 420px; height: 420px; border-radius: 50%; filter: blur(40px); background: radial-gradient(closest-side, rgba(var(--hue-rgb), 0.22), transparent); animation: rh-glow 8s ease-in-out infinite; }
.tr-agent__stage::after { content: ""; position: absolute; left: -64px; bottom: -96px; z-index: -1; width: 320px; height: 320px; border-radius: 50%; background: radial-gradient(closest-side, rgba(255, 255, 255, 0.85), transparent); }
.tr-eyebrow--agent::before { content: ""; width: 16px; height: 16px; flex: none; }
body .tr-agent__title { margin: 20px 0; font-size: clamp(30px, 4.2vw, 50px); font-weight: 300; line-height: 1.06; letter-spacing: -0.04em; color: var(--tr-navy); }
body .tr-agent__body { margin-bottom: 32px; font-size: 16px; font-weight: 300; line-height: 1.7; color: var(--tr-body); }
@media (min-width: 768px) { body .tr-agent__body { font-size: 17px; } }
.tr-agent__card { position: relative; padding: 28px; border-radius: 28px; background: rgba(255, 255, 255, 0.8); box-shadow: 0 30px 60px -36px rgba(15, 27, 53, 0.45), 0 0 0 1px #fff; -webkit-backdrop-filter: blur(24px); backdrop-filter: blur(24px); }
@media (min-width: 768px) { .tr-agent__card { padding: 36px; } }
.tr-agent__icon { position: relative; display: block; width: 56px; height: 56px; margin-bottom: 24px; border-radius: 16px; background: rgba(var(--hue-rgb), 0.12); }
.tr-agent__icon::after { content: ""; position: absolute; left: 13px; top: 13px; width: 30px; height: 30px; }
body .tr-agent__card-title { font-size: 18px; font-weight: 700; color: var(--tr-navy); }
body .tr-agent__card-body { margin-top: 8px; font-size: 15px; line-height: 1.6; color: var(--tr-body); }

/* ---------- Suite navigation: every engine, the current one highlighted ---------- */
.tr-suite { padding: 64px 20px; border-top: 1px solid rgba(34, 58, 117, 0.07); background: #fff; }
@media (min-width: 768px) { .tr-suite { padding: 80px 48px; } }
body .tr-suite__eyebrow { margin-bottom: 24px; font-size: 12px; font-weight: 700; letter-spacing: 0.2em; text-transform: uppercase; color: var(--tr-muted-2); }
.tr-suite__list { display: grid; gap: 12px; }
@media (min-width: 640px) { .tr-suite__list { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1024px) {
	.tr-suite__list--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
	.tr-suite__list--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
	.tr-suite__list--auto { grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); }
}
.tr-suite__item { --spot: rgba(var(--hue-rgb), 0.14); position: relative; display: flex; flex-direction: column; gap: 6px; overflow: hidden; padding: 20px; border-radius: 22px; background: var(--tr-surface); box-shadow: inset 0 0 0 1px rgba(34, 58, 117, 0.06); }
/* The current page's card has the premium card's 1px border (as on the site, its row is 2px taller). */
.tr-suite__item.is-current { background: #fff; border: 1px solid rgba(34, 58, 117, 0.08); box-shadow: 0 1px 0 rgba(255, 255, 255, 0.9) inset, 0 1px 2px rgba(15, 27, 53, 0.04), 0 18px 40px -18px rgba(15, 27, 53, 0.22); }
.tr-suite__item::after { content: ""; order: -1; width: 26px; height: 26px; margin-bottom: 8px; opacity: 0.7; }
.tr-suite__item.is-current::after { opacity: 1; }
body .tr-suite__title { font-size: 15px; font-weight: 700; color: var(--tr-navy); }
.tr-suite__title a { color: inherit; text-decoration: none; }
body .tr-suite__note { font-size: 12px; color: var(--tr-muted-2); }
body .tr-suite__agent { position: relative; z-index: 2; margin-top: 4px; font-size: 12px; font-weight: 600; }
.tr-suite__agent a { color: var(--hue-ink); text-decoration: none; }

/* ---------- Feature split: copy and checklist beside a product visual ---------- */
.tr-split { overflow: hidden; padding: 96px 20px; background: #fff; }
@media (min-width: 768px) { .tr-split { padding: 128px 48px; } }
.tr-split__grid { display: grid; align-items: center; gap: 48px; }
@media (min-width: 1024px) { .tr-split__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 64px; } }
body .tr-split__title { margin: 20px 0; font-size: clamp(34px, 5vw, 60px); line-height: 1.03; letter-spacing: -0.045em; }
body .tr-split__body { margin-bottom: 32px; }
body .tr-split__bullets { display: grid; gap: 12px; margin: 0; padding: 0; list-style: none; }
body .tr-split__bullets li { display: flex; align-items: center; gap: 12px; padding: 12px 16px; border-radius: 16px; background: var(--tr-surface); font-size: 15px; font-weight: 600; color: var(--tr-navy); }
.tr-split__bullets li::before { content: ""; flex: none; width: 24px; height: 24px; border-radius: 50%; background: var(--tr-check-white) center / 12px no-repeat, var(--hue); }
.tr-split.tr-hue-gray .tr-split__bullets li::before { background-color: #48587a; }
.tr-split__visual::before { content: ""; position: absolute; inset: -32px; border-radius: 48px; filter: blur(64px); background: radial-gradient(closest-side, rgba(var(--hue-rgb), 0.3), transparent); pointer-events: none; }
.tr-split__visual > .tr-visual { box-shadow: 0 50px 100px -40px rgba(15, 27, 53, 0.55), 0 0 0 1px rgba(0, 0, 0, 0.05); }
.tr-split__image img { display: block; width: 100%; height: auto; border-radius: 28px; }

/* Editor: product visuals render on the site; in the editor their placeholder shows as a quiet panel. */
.editor-styles-wrapper .tr-visual-slot { min-height: 340px; border-radius: 28px; background: linear-gradient(160deg, #f7f9fd, #eef3fb); }

/* Counted values use tabular figures, like the site's CountUp. */
.tr-sgrid__value, .tr-scard__value, .tr-live__mvalue, .tr-live__hvalue { font-variant-numeric: tabular-nums; }

/* ======================================================================
   0.5.0: the design's resources, contact page and article blocks
   (src/sections/resources.tsx, company.tsx ContactPanel/Offices, components/ResourceArt.tsx)
   ====================================================================== */

/* ---------- Resource header ---------- */
.tr-rheader { padding: 112px 20px 48px; background: #fff; }
@media (min-width: 768px) { .tr-rheader { padding: 140px 48px 64px; } }
.tr-rheader__crumb { display: flex; align-items: center; gap: 8px; margin-bottom: 40px; font-size: 13px; font-weight: 600; color: var(--tr-muted-2); }
@media (min-width: 768px) { .tr-rheader__crumb { margin-bottom: 56px; } }
.tr-rheader__crumb a { color: inherit; text-decoration: none; transition: color 0.15s; }
.tr-rheader__crumb a:hover, .tr-rheader__crumb .is-current { color: var(--tr-navy); }
.tr-rheader__grid { display: grid; align-items: center; gap: 40px; }
@media (min-width: 1024px) {
	.tr-rheader__grid { grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 56px; }
	.tr-rheader__copy { grid-column: span 7; }
	.tr-rheader__art { grid-column: span 5; }
}
body .tr-rheader__title { margin-top: 20px; font-size: clamp(38px, 5vw, 66px); font-weight: 300; line-height: 1.04; letter-spacing: -0.045em; text-wrap: balance; color: var(--tr-navy); }
body .tr-rheader__dek { max-width: 620px; margin-top: 24px; font-size: 18px; font-weight: 300; line-height: 1.6; color: var(--tr-body); }
@media (min-width: 768px) { body .tr-rheader__dek { font-size: 20px; } }
.tr-rheader__meta { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px; margin-top: 32px; font-size: 14px; color: var(--tr-muted-2); }
.tr-rheader__pdf { display: inline-flex; align-items: center; gap: 6px; font-weight: 600; color: var(--tr-blue-ink); text-decoration: none; }
.tr-rheader__frame { position: relative; aspect-ratio: 4 / 3; overflow: hidden; border-radius: 32px; background: var(--tr-surface); box-shadow: 0 40px 80px -44px rgba(15, 27, 53, 0.5), 0 0 0 1px rgba(0, 0, 0, 0.05); }
.tr-rheader__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.tr-rheader__facts { display: grid; gap: 24px 32px; margin: 48px 0 0; padding-top: 32px; border-top: 1px solid rgba(34, 58, 117, 0.12); }
@media (min-width: 640px) { .tr-rheader__facts { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 768px) { .tr-rheader__facts { margin-top: 64px; } }
@media (min-width: 1024px) { .tr-rheader__facts { grid-template-columns: repeat(3, minmax(0, 1fr)); } .tr-rheader__facts.is-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.tr-rheader__facts dt { font-size: 11px; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase; color: var(--tr-muted-2); }
.tr-rheader__facts dd { margin: 8px 0 0; font-size: 16px; font-weight: 600; line-height: 1.4; color: var(--tr-navy); }
/* Author byline */
.tr-byline2 { margin-top: 32px; }
.tr-byline2__label { margin: 0 0 12px; font-size: 11px; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase; color: var(--tr-muted-2); }
.tr-byline2__list { display: flex; flex-wrap: wrap; gap: 16px 32px; margin: 0; padding: 0; list-style: none; }
.tr-byline2__list li { display: flex; align-items: center; gap: 14px; max-width: 340px; }
.tr-byline2__photo { flex: none; width: 56px; height: 56px; border-radius: 50%; object-fit: cover; box-shadow: 0 0 0 2px #fff, 0 8px 20px -10px rgba(15, 27, 53, 0.5); }
.tr-byline2__initials { display: flex; flex: none; align-items: center; justify-content: center; width: 56px; height: 56px; border-radius: 50%; background: var(--tr-surface-2); font-size: 16px; font-weight: 700; color: var(--tr-navy); }
.tr-byline2__who { min-width: 0; }
.tr-byline2__name { display: flex; align-items: center; gap: 8px; font-size: 15px; font-weight: 600; color: var(--tr-navy); }
.tr-byline2__in { display: inline-flex; color: #0a66c2; transition: opacity 0.15s; }
.tr-byline2__in:hover { opacity: 0.75; }
.tr-byline2__role { display: block; margin-top: 2px; font-size: 13px; line-height: 1.4; color: var(--tr-muted-2); }

/* ---------- Resource cards: meta line with author faces ---------- */
.tr-rcard__meta { gap: 10px; }
.tr-rcard__meta > .tr-faces + span::before { content: none; }
.tr-faces { display: flex; }
.tr-face { width: 28px; height: 28px; border-radius: 50%; object-fit: cover; box-shadow: 0 0 0 2px #fff; }
.tr-face + .tr-face { margin-left: -8px; }

/* ---------- Cover art for items without a photo (ResourceArt) ---------- */
.tr-cover__label { position: relative; display: block; margin-top: 8px; font-size: 22px; font-weight: 300; line-height: 1.1; letter-spacing: -0.03em; text-wrap: balance; }
.tr-cover--hero .tr-cover__label { font-size: clamp(26px, 2.6vw, 36px); }
.tr-art { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; overflow: hidden; transition: transform 1.2s var(--tr-ease-expo); }
.tr-rcard:hover .tr-art { transform: scale(1.03); }
.tr-art--paper { background: linear-gradient(150deg, #f1f6ff 0%, #dbe8fd 55%, #c9dcfb 100%); }
.tr-art--paper::before { content: ""; position: absolute; right: -80px; top: -96px; width: 288px; height: 288px; border-radius: 50%; background: radial-gradient(closest-side, rgba(255, 255, 255, 0.9), transparent); }
.tr-art__faces { position: relative; display: flex; }
.tr-art__faces img { width: 96px; height: 96px; border-radius: 50%; object-fit: cover; box-shadow: 0 0 0 4px #fff, 0 18px 36px -18px rgba(26, 95, 196, 0.6); }
.tr-art__faces img + img { margin-left: -16px; }
.tr-cover--hero .tr-art__faces img { width: 128px; height: 128px; }
.tr-cover--hero .tr-art__faces img + img { margin-left: -20px; }
.tr-art__icon { position: relative; width: 56px; opacity: 0.8; }
.tr-cover--hero .tr-art__icon { width: 80px; }
.tr-art__logo { position: absolute; left: 24px; bottom: 24px; height: 12px; width: auto; opacity: 0.7; }
.tr-cover--hero .tr-art__logo { left: 36px; bottom: 36px; height: 16px; }
.tr-art--logo { background: linear-gradient(150deg, #f5f8fd 0%, #dfeafe 100%); }
.tr-art--logo::before { content: ""; position: absolute; right: -64px; top: -80px; width: 256px; height: 256px; border-radius: 50%; background: radial-gradient(closest-side, rgba(255, 255, 255, 0.9), transparent); }
.tr-art__mark { position: relative; display: block; max-width: 100%; background: var(--tr-navy); -webkit-mask: var(--src) center / contain no-repeat; mask: var(--src) center / contain no-repeat; }

/* ---------- Article blocks: takeaways, quotes, figures, stats, callouts, video ---------- */
body .tr-article__body > .tr-takeaways { margin: 0 0 64px; padding: 28px; border-radius: 28px; background: linear-gradient(160deg, #f1f6ff 0%, #e3edff 100%); box-shadow: inset 0 0 0 1px rgba(56, 136, 255, 0.14); }
@media (min-width: 768px) { body .tr-article__body > .tr-takeaways { padding: 36px; } }
body .tr-takeaways__title { margin: 0 0 20px; font-size: 12px; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase; color: var(--tr-blue-ink); }
body .tr-takeaways__list { display: grid; gap: 14px; margin: 0; padding: 0; list-style: none; }
body .tr-takeaways__list li { position: relative; padding-left: 38px; font-size: 16px; line-height: 1.6; color: var(--tr-navy); }
@media (min-width: 768px) { body .tr-takeaways__list li { font-size: 17px; } }
.tr-takeaways__list li::before { content: ""; position: absolute; left: 0; top: 3px; width: 24px; height: 24px; border-radius: 50%; background: var(--tr-check-blue) center / 12px no-repeat, #fff; }
body .tr-article__body > .tr-quote { margin: 48px 0; padding-left: 28px; border-left: 2px solid var(--tr-pink); }
@media (min-width: 768px) { body .tr-article__body > .tr-quote { padding-left: 36px; } }
body .tr-quote__text { margin: 0; font-size: clamp(22px, 2.4vw, 30px); font-weight: 300; line-height: 1.35; letter-spacing: -0.02em; color: var(--tr-navy); }
.tr-quote__by { display: flex; align-items: center; gap: 14px; margin-top: 20px; font-size: 14px; color: var(--tr-muted-2); }
body .tr-quote__photo { flex: none; width: 48px; height: 48px; margin: 0; }
.tr-quote__photo img { width: 48px; height: 48px; border-radius: 50%; object-fit: cover; }
body .tr-quote__cite { margin: 0; font-size: 14px; color: var(--tr-muted-2); }
.tr-quote__cite strong { font-weight: 600; color: var(--tr-navy); }
body .tr-article__body > .tr-astats { display: grid; gap: 16px; margin: 40px 0; }
@media (min-width: 640px) { body .tr-article__body > .tr-astats { grid-template-columns: repeat(2, minmax(0, 1fr)); } body .tr-article__body > .tr-astats--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.tr-astat { padding: 24px; border-radius: 22px; background: linear-gradient(160deg, #f1f6ff, #e3edff); box-shadow: inset 0 0 0 1px rgba(56, 136, 255, 0.14); }
body .tr-astat__value { margin: 0; font-size: clamp(30px, 3vw, 40px); font-weight: 700; line-height: 1; letter-spacing: -0.04em; white-space: nowrap; background: var(--tr-ink); -webkit-background-clip: text; background-clip: text; color: transparent; }
body .tr-astat__label { margin: 12px 0 0; font-size: 14px; line-height: 1.45; color: var(--tr-body); }
body .tr-article__body > .tr-callout { margin: 40px 0; padding: 28px; border-radius: 24px; background: linear-gradient(150deg, #fff5fa, #fbe6f1); }
@media (min-width: 768px) { body .tr-article__body > .tr-callout { padding: 32px; } }
body .tr-callout__title { margin: 0 0 8px; font-size: 12px; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: #c40080; }
body .tr-callout__text { margin: 0; font-size: 17px; line-height: 1.7; color: var(--tr-navy); }
body .tr-article__body > .tr-avideo { margin: 40px 0; border-radius: 22px; box-shadow: 0 24px 48px -36px rgba(15, 27, 53, 0.45); }
.tr-avideo::before { content: none; }

/* ---------- Contact: intro with email cards beside the form ---------- */
.tr-contact { padding: 80px 20px; background: linear-gradient(180deg, #ffffff, #f5f8fd); }
@media (min-width: 768px) { .tr-contact { padding: 112px 48px; } }
/* The demo page (/book-a-discovery-call/): the section is the page, so it clears the floating header (the site adds an
   88px spacer above a first section that isn't a hero). */
.tr-contact--page { padding-top: 168px; }
@media (min-width: 768px) { .tr-contact--page { padding-top: 200px; } }
.tr-contact__grid { display: grid; gap: 40px; }
@media (min-width: 1024px) {
	.tr-contact__grid { grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.3fr); gap: 64px; }
	.tr-contact__intro { position: sticky; top: 128px; align-self: start; }
}
body .tr-contact__title { margin: 20px 0; font-size: clamp(34px, 4.6vw, 56px); line-height: 1.03; letter-spacing: -0.045em; }
.tr-contact__title strong { display: inline-block; padding-bottom: 0.12em; margin-bottom: -0.12em; }
body .tr-contact__intro--text .tr-contact__body { margin-bottom: 0; }
/* [tr_press_form] before its HubSpot form id is set. */
.tr-form-soon { margin: 0; padding: 48px 0; font-size: 17px; font-weight: 500; text-align: center; color: var(--tr-body); }
body .tr-contact__body { margin-bottom: 40px; font-size: 17px; font-weight: 300; line-height: 1.65; color: var(--tr-body); }
.tr-contact__channels { display: grid; gap: 12px; }
.tr-mailcard { position: relative; padding: 16px 52px 16px 20px; border-radius: 20px; background: #fff; box-shadow: 0 0 0 1px rgba(34, 58, 117, 0.08); transition: box-shadow 0.3s; }
.tr-mailcard:hover { box-shadow: 0 0 0 1px rgba(34, 58, 117, 0.08), 0 20px 40px -24px rgba(15, 27, 53, 0.4); }
.tr-mailcard::after { content: "→"; position: absolute; right: 20px; top: 50%; transform: translateY(-50%); color: var(--tr-navy); transition: transform 0.4s var(--tr-ease-expo); }
.tr-mailcard:hover::after { transform: translate(4px, -50%); }
/* Contact buttons (0.9.0): the button text in blue ink where the email address was. */
body .tr-mailcard__cta { margin-top: 2px; font-size: 15px; font-weight: 600; color: var(--tr-blue-ink); }
.tr-mailcard__cta a { color: inherit; text-decoration: none; }
body .tr-offices__channels .tr-mailcard__cta { margin-top: 4px; font-size: 16px; }
.tr-offices__cta { margin-top: 32px; }
body .tr-mailcard__label { font-size: 11px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--tr-muted-2); }
body .tr-mailcard__email { margin-top: 2px; font-size: 15px; font-weight: 600; color: var(--tr-navy); }
.tr-mailcard__email a { color: inherit; text-decoration: none; }
body .tr-mailcard__note { margin-top: 2px; font-size: 12px; color: var(--tr-muted-2); }
.tr-contact__card { padding: 24px; border-radius: 32px; }
@media (min-width: 768px) { .tr-contact__card { padding: 40px; } }
/* The form (ContactForm.tsx) */
.tr-contact-form { display: grid; gap: 16px; }
.tr-form__row { display: grid; gap: 16px; }
@media (min-width: 640px) { .tr-form__row { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.tr-form__field { display: grid; gap: 6px; font-size: 13px; font-weight: 600; color: var(--tr-navy); }
.tr-form__field :is(input, select, textarea) { width: 100%; min-height: 48px; padding: 0 16px; border: 1px solid rgba(34, 58, 117, 0.2); border-radius: 16px; background: #fff; color: var(--tr-navy); font: inherit; font-size: 16px; font-weight: 400; transition: border-color 160ms, box-shadow 160ms; }
.tr-form__field select { appearance: auto; }
.tr-form__field textarea { min-height: 140px; padding-block: 12px; line-height: 1.625; resize: vertical; }
.tr-form__field :is(input, select, textarea):focus { outline: none; border-color: var(--tr-blue); box-shadow: 0 0 0 3px rgba(56, 136, 255, 0.18); }
.tr-form__hp { display: none; }
.tr-form__error { margin: 0; font-size: 13px; font-weight: 500; color: #c8002f; }
.tr-form__foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px; padding-top: 8px; }
.tr-form__privacy { max-width: 340px; margin: 0; font-size: 12px; line-height: 1.625; color: var(--tr-muted-2); }
.tr-form__submit span { display: inline-block; transition: transform 0.4s var(--tr-ease-expo); }
.tr-form__submit:hover span { transform: translateX(4px); }
.tr-form__submit:disabled { opacity: 0.6; cursor: default; }
@media (max-width: 639px) { .tr-form__submit { width: 100%; } }
.tr-form__done { display: flex; min-height: 420px; flex-direction: column; align-items: center; justify-content: center; gap: 16px; text-align: center; }
.tr-form__check { display: flex; align-items: center; justify-content: center; width: 56px; height: 56px; border-radius: 50%; background: linear-gradient(135deg, #3888ff, #40a8f0); box-shadow: 0 14px 30px -12px rgba(56, 136, 255, 0.8); font-size: 24px; color: #fff; animation: fade-up 0.8s var(--tr-ease-expo); }
.tr-form__thanks { max-width: 360px; margin: 0; font-size: 18px; font-weight: 600; color: var(--tr-navy); }

/* ---------- Offices with local time ---------- */
.tr-offices { padding: 96px 20px; background: linear-gradient(180deg, #ffffff, #f5f8fd); }
@media (min-width: 768px) { .tr-offices { padding: 128px 48px; } }
.tr-offices__intro { max-width: 820px; margin-bottom: 48px; }
@media (min-width: 768px) { .tr-offices__intro { margin-bottom: 56px; } }
body .tr-offices__title { margin: 20px 0; font-size: clamp(34px, 5vw, 60px); line-height: 1.03; letter-spacing: -0.045em; }
.tr-offices__grid { display: grid; gap: 16px; }
@media (min-width: 640px) { .tr-offices__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .tr-offices__grid { grid-template-columns: repeat(5, minmax(0, 1fr)); } }
.tr-office { position: relative; display: flex; flex-direction: column; overflow: hidden; border-radius: 28px; }
.tr-office__media { position: relative; aspect-ratio: 4 / 3; overflow: hidden; background: var(--tr-surface-2); }
body .tr-office__img { position: absolute; inset: 0; margin: 0; }
.tr-office__img img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.7s var(--tr-ease-expo); }
.tr-office:hover .tr-office__img img { transform: scale(1.06); }
.tr-office__media::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(to top, rgba(15, 27, 53, 0.7), rgba(15, 27, 53, 0.1), transparent); }
.tr-office__media .tr-office__country, .tr-office__media .tr-office__city { position: absolute; z-index: 1; left: 20px; right: 20px; color: #fff; }
body .tr-office__media .tr-office__country { bottom: 52px; font-size: 11px; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: rgba(255, 255, 255, 0.75); }
body .tr-office__media .tr-office__city { bottom: 16px; font-size: 24px; font-weight: 700; letter-spacing: -0.03em; line-height: 1.5; }
.tr-office__head { padding: 24px 24px 0; }
body .tr-office__head .tr-office__country { font-size: 11px; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: var(--tr-muted-2); }
body .tr-office__head .tr-office__city { margin-top: 8px; font-size: 24px; font-weight: 700; letter-spacing: -0.03em; color: var(--tr-navy); }
.tr-office__body { display: flex; flex: 1; flex-direction: column; padding: 20px 24px 24px; }
body .tr-office__tag { align-self: flex-start; margin-bottom: 12px; padding: 4px 10px; border-radius: 999px; background: var(--tr-surface-2); font-size: 11px; font-weight: 600; color: var(--tr-blue-ink); }
body .tr-office__address { flex: 1; font-size: 13px; line-height: 1.6; color: var(--tr-body); }
.tr-office__time { min-height: 37.8px; margin: 20px 0 0; padding-top: 16px; border-top: 1px solid rgba(34, 58, 117, 0.08); font-size: 13px; font-weight: 600; font-variant-numeric: tabular-nums; color: var(--tr-navy); }
.tr-office__clock { display: inline-flex; align-items: center; gap: 6px; }
.tr-office__clock::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: #9eadc8; }
.tr-office__clock.is-open::before { background: #15a86b; }
.tr-office__clock:empty::before { content: none; }
.tr-offices__channels { display: grid; gap: 12px; margin-top: 24px; }
/* One equal column per email card (two since 0.8.1, when the careers card went), so the row has no empty slot. */
@media (min-width: 768px) { .tr-offices__channels { grid-auto-columns: minmax(0, 1fr); grid-auto-flow: column; } }
/* Under the offices the email cards are a size larger than on the Contact panel. */
.tr-offices__channels .tr-mailcard { padding: 20px 56px 20px 24px; }
.tr-offices__channels .tr-mailcard::after { right: 24px; }
body .tr-offices__channels .tr-mailcard__label { font-size: 12px; }
body .tr-offices__channels .tr-mailcard__email { margin-top: 4px; font-size: 16px; }

/* Aurora hero (Contact, Company, Careers): the Ray mark on the right */
.tr-hstage__mark { position: absolute; right: -96px; top: 50%; display: none; width: 520px; transform: translateY(-50%); opacity: 0.08; pointer-events: none; }
@media (min-width: 768px) { .tr-hstage__mark { display: block; } }
.tr-hstage--aurora .tr-hstage__media { background: var(--tr-navy-900); }
/* Quote author photo: an image block, so it must win over the article's image spacing and frame. */
body .tr-article__body .tr-quote__photo { margin: 0; }
body .tr-article__body .tr-quote__photo img { width: 48px; height: 48px; border-radius: 50%; box-shadow: none; }
/* Tables: the frame is on the table, so the caption sits below it (as on the site). */
body .tr-article__body .wp-block-table { overflow-x: auto; border-radius: 0; box-shadow: none; }
body .tr-article__body .wp-block-table table { border-collapse: separate; border-spacing: 0; overflow: hidden; border-radius: 20px; box-shadow: inset 0 0 0 1px rgba(34, 58, 117, 0.1); }
body .tr-article__body .wp-block-table figcaption { margin-top: 12px; padding: 0; }

/* ==========================================================================
   0.6.0: Company and Careers (src/sections/company.tsx)
   ========================================================================== */

/* Values grid, default: icon (or numbered tile) above the title. */
@media (min-width: 768px) { .tr-values__grid--5 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .tr-values__grid--5 { grid-template-columns: repeat(5, minmax(0, 1fr)); } }
.tr-icard { position: relative; display: flex; flex-direction: column; overflow: hidden; padding: 28px; border-radius: 28px; --spot: rgba(var(--hue-rgb), 0.12); }
@media (min-width: 768px) { .tr-icard { padding: 32px; } }
.tr-icard__icon { display: flex; align-items: center; justify-content: center; width: 88px; height: 88px; margin-bottom: 32px; border-radius: 26px; background: linear-gradient(150deg, #ffffff, #f1f6fe); box-shadow: 0 1px 0 rgba(255, 255, 255, 0.9) inset, 0 16px 32px -20px rgba(26, 95, 196, 0.45), 0 0 0 1px rgba(34, 58, 117, 0.06); transition: transform 0.7s var(--tr-ease-expo); }
.tr-icard:hover .tr-icard__icon { transform: scale(1.06); }
body .tr-icard__icon .wp-block-image { margin: 0; }
body .tr-icard__icon img { display: block; width: 58px; height: 58px; object-fit: contain; }
.tr-icard__tile { display: flex; align-items: center; justify-content: space-between; margin-bottom: 32px; }
.tr-icard__tile > span:first-child { width: 40px; height: 40px; border-radius: 16px; box-shadow: 0 10px 24px -10px rgba(15, 27, 53, 0.6); background: linear-gradient(140deg, #1a5fc4, #9fd4ff); }
.tr-icard__tile--1 > span:first-child { background: linear-gradient(140deg, #3888ff, #9fd4ff); }
.tr-icard__tile--2 > span:first-child { background: linear-gradient(140deg, #40a8f0, #9fd4ff); }
.tr-icard__tile > span:last-child { font-size: 12px; font-weight: 700; font-variant-numeric: tabular-nums; letter-spacing: 0.1em; color: var(--tr-muted-2); }
body .tr-icard__tag { margin-bottom: 8px; font-size: 11px; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: var(--tr-blue-ink); }
body .tr-icard__title { margin: 0 0 12px; font-size: 20px; font-weight: 700; line-height: 1.2; letter-spacing: -0.02em; color: var(--tr-navy); }
@media (min-width: 768px) { body .tr-icard__title { font-size: 22px; } }
@media (min-width: 1024px) { body .tr-icard__title.has-icon { min-height: 2.4em; } }
body .tr-icard__body { font-size: 15px; line-height: 1.6; color: var(--tr-body-3); }

/* Values grid, bento: soft tiles, the first and last twice as wide. */
.tr-bento { display: grid; gap: 16px; }
@media (min-width: 768px) { .tr-bento { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .tr-bento { grid-template-columns: repeat(4, minmax(0, 1fr)); } .tr-bento__tile.is-wide { grid-column: span 2; } }
.tr-bento__tile { position: relative; display: flex; flex-direction: column; justify-content: flex-end; min-height: 240px; overflow: hidden; padding: 32px; border-radius: 32px; box-shadow: 0 0 0 1px rgba(34, 58, 117, 0.06); --spot: rgba(255, 255, 255, 0.6); }
@media (min-width: 768px) { .tr-bento__tile { min-height: 280px; padding: 40px; } }
.tr-bento__tile--0, .tr-bento__tile--4 { background: linear-gradient(150deg, #eef4ff 0%, #dbe7fd 100%); }
.tr-bento__tile--1, .tr-bento__tile--5 { background: linear-gradient(150deg, #fff5fa 0%, #fbe1ef 100%); }
.tr-bento__tile--2, .tr-bento__tile--3 { background: linear-gradient(150deg, #f5f8fd 0%, #e8eef8 100%); }
.tr-bento__tile::after { content: ""; position: absolute; right: -64px; top: -80px; width: 256px; height: 256px; border-radius: 50%; pointer-events: none; background: radial-gradient(closest-side, rgba(255, 255, 255, 0.9), transparent); transition: transform 0.7s var(--tr-ease-expo); }
.tr-bento__tile:hover::after { transform: scale(1.25); }
body .tr-bento__title { position: relative; z-index: 1; font-size: clamp(28px, 2.6vw, 36px); font-weight: 300; line-height: 1.02; letter-spacing: -0.045em; text-wrap: balance; color: var(--tr-navy); }
.tr-bento__tile.is-wide .tr-bento__title { font-size: clamp(34px, 3.6vw, 52px); }
body .tr-bento__body { position: relative; z-index: 1; margin-top: 16px; font-size: 15px; line-height: 1.6; color: var(--tr-body-3); }
@media (min-width: 768px) { body .tr-bento__body { font-size: 16px; } }
.tr-bento__tile.is-wide .tr-bento__body { max-width: 440px; }

/* People grid (photos). */
.tr-people { background: #fff; padding: 96px 20px; }
@media (min-width: 768px) { .tr-people { padding: 128px 48px; } }
.tr-people__intro { max-width: 820px; margin-bottom: 48px; }
@media (min-width: 768px) { .tr-people__intro { margin-bottom: 64px; } }
body .tr-people__title { margin: 20px 0; font-size: clamp(34px, 5.2vw, 64px); line-height: 1.02; letter-spacing: -0.045em; }
.tr-people__groups { display: grid; gap: 56px; }
body .tr-people__group-title { margin: 0 0 24px; font-size: 13px; font-weight: 700; line-height: 1.5; letter-spacing: 0.18em; text-transform: uppercase; color: var(--tr-muted-2); }
.tr-people__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px 16px; }
@media (min-width: 640px) { .tr-people__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 1024px) {
	.tr-people__grid { gap: 40px 20px; }
	.tr-people__grid--5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
}
body .tr-person__photo { position: relative; margin: 0; aspect-ratio: 1; overflow: hidden; border-radius: 24px; background: var(--tr-surface-2); box-shadow: 0 24px 48px -28px rgba(15, 27, 53, 0.55), 0 0 0 1px rgba(0, 0, 0, 0.05); transition: transform 0.5s var(--tr-ease-expo), box-shadow 0.5s var(--tr-ease-expo); }
body .tr-person__photo img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform 0.7s var(--tr-ease-expo); }
/* A person without a photo yet: initials on the card (review round 4). */
.tr-person__initials { display: flex; align-items: center; justify-content: center; background: linear-gradient(140deg, var(--hue), var(--tr-navy)) !important; font-size: 36px; font-weight: 700; color: #fff; }
.tr-person__photo::after { content: ""; position: absolute; inset: auto 0 0; height: 33.333%; pointer-events: none; background: linear-gradient(to top, rgba(10, 21, 48, 0.25), transparent); opacity: 0; transition: opacity 0.5s; }
.tr-person:hover .tr-person__photo { transform: translateY(-4px); box-shadow: 0 34px 60px -28px rgba(15, 27, 53, 0.6), 0 0 0 1px rgba(0, 0, 0, 0.05); }
.tr-person:hover .tr-person__photo img { transform: scale(1.04); }
.tr-person:hover .tr-person__photo::after { opacity: 1; }
body .tr-person__name { margin-top: 16px; font-size: 16px; font-weight: 700; line-height: 1.5; letter-spacing: -0.015em; color: var(--tr-navy); }
@media (min-width: 768px) { body .tr-person__name { font-size: 17px; } }
body .tr-person__title { margin-top: 2px; font-size: 13px; line-height: 1.375; color: var(--tr-muted-2); }
body .tr-person__link { margin-top: 6px; font-size: 12px; font-weight: 600; line-height: 1.5; }
.tr-person__link a { color: var(--tr-blue-ink); text-decoration: none; }

/* Reels: Instagram posters that play in place (theme.js). */
.tr-reels { overflow: hidden; background: #fff; padding: 96px 20px; }
@media (min-width: 768px) { .tr-reels { padding: 128px 48px; } }
.tr-reels__head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 24px; margin-bottom: 40px; }
@media (min-width: 768px) { .tr-reels__head { margin-bottom: 56px; } }
.tr-reels__copy { max-width: 720px; }
body .tr-reels__title { margin: 20px 0 16px; font-size: clamp(34px, 5vw, 60px); line-height: 1.03; letter-spacing: -0.045em; }
body .tr-reels__profile { font-size: 15px; font-weight: 600; line-height: 1.5; white-space: nowrap; }
.tr-reels__profile a { color: var(--tr-navy); text-decoration: none; }
.tr-reels__list { display: flex; gap: 16px; margin: 0 -20px; padding: 0 20px 16px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; }
.tr-reels__list::-webkit-scrollbar { display: none; }
@media (min-width: 640px) { .tr-reels__list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); margin: 0; padding: 0 0 16px; overflow: visible; } }
@media (min-width: 1024px) { .tr-reels__list { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; } }
.tr-reel { position: relative; flex: none; width: 72%; aspect-ratio: 9 / 16; overflow: hidden; scroll-snap-align: start; border-radius: 28px; background: var(--tr-navy-900); box-shadow: 0 40px 80px -40px rgba(15, 27, 53, 0.55), 0 0 0 1px rgba(0, 0, 0, 0.05); }
@media (min-width: 640px) { .tr-reel { width: auto; } }
body .tr-reel__poster { position: absolute; inset: 0; margin: 0; }
.tr-reel__poster a { position: absolute; inset: 0; display: block; }
.tr-reel__poster img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--tr-ease-expo); }
.tr-reel:hover .tr-reel__poster img { transform: scale(1.04); }
.tr-reel__poster a::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(15, 27, 53, 0) 40%, rgba(15, 27, 53, 0.7) 68%, rgba(15, 27, 53, 0.96) 100%); }
.tr-reel__poster a::before {
	content: ""; position: absolute; left: 50%; top: 50%; z-index: 1; width: 64px; height: 64px; border: 1px solid rgba(255, 255, 255, 0.5); border-radius: 50%;
	background: rgba(255, 255, 255, 0.2) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='15' height='18'%3E%3Cpath d='M0 0l15 9-15 9z' fill='%23fff'/%3E%3C/svg%3E") calc(50% + 2px) 50% no-repeat;
	box-shadow: 0 10px 30px rgba(15, 27, 53, 0.35); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
	transform: translate(-50%, -50%); transition: transform 0.5s var(--tr-ease-expo);
}
.tr-reel:hover .tr-reel__poster a::before { transform: translate(-50%, -50%) scale(1.1); }
.tr-reel__copy { position: absolute; left: 20px; right: 20px; bottom: 20px; z-index: 1; color: #fff; pointer-events: none; }
body .tr-reel__meta { font-size: 11px; font-weight: 700; line-height: 1.5; letter-spacing: 0.16em; text-transform: uppercase; color: rgba(255, 255, 255, 0.75); }
body .tr-reel__title { margin-top: 6px; min-height: 2.5em; font-size: 18px; font-weight: 600; line-height: 1.25; letter-spacing: -0.015em; text-wrap: balance; }
.tr-reel iframe { position: absolute; inset: 0; z-index: 2; width: 100%; height: 100%; border: 0; background: #fff; }

/* Jobs board: team cards and the CV band. */
.tr-jobs { background: #fff; padding: 96px 20px; }
@media (min-width: 768px) { .tr-jobs { padding: 128px 48px; } }
.tr-jobs__head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 32px; margin-bottom: 48px; }
@media (min-width: 768px) { .tr-jobs__head { margin-bottom: 64px; } }
.tr-jobs__copy { max-width: 760px; }
body .tr-jobs__title { margin: 20px 0; font-size: clamp(34px, 5.2vw, 64px); line-height: 1.02; letter-spacing: -0.045em; }
.tr-jobs__grid { display: grid; gap: 16px; }
@media (min-width: 768px) { .tr-jobs__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .tr-jobs__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } .tr-jobs__grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.tr-team { position: relative; display: flex; flex-direction: column; overflow: hidden; padding: 28px; border-radius: 28px; --spot: rgba(var(--hue-rgb), 0.14); }
@media (min-width: 768px) { .tr-team { padding: 32px; } }
.tr-team::after { content: ""; position: absolute; right: -56px; top: -56px; z-index: -1; width: 160px; height: 160px; border-radius: 50%; pointer-events: none; background: rgba(var(--hue-rgb), 0.25); filter: blur(40px); transition: transform 0.7s var(--tr-ease-expo); }
.tr-team:hover::after { transform: scale(1.25); }
body .tr-team__title { position: relative; margin: 0 0 12px; font-size: 24px; font-weight: 700; line-height: 1.5; letter-spacing: -0.03em; color: var(--tr-navy); }
.tr-team__title::before { content: ""; display: block; width: 40px; height: 4px; margin-bottom: 24px; border-radius: 999px; background: var(--hue); }
body .tr-team__body { position: relative; margin-bottom: 24px; font-size: 15px; line-height: 1.6; color: var(--tr-body-3); }
body .tr-team__cta { position: relative; margin-top: auto; font-size: 14px; font-weight: 600; line-height: 1.5; }
.tr-team__cta a { color: var(--hue-ink); text-decoration: none; }
.tr-jobs__cv { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 24px; margin-top: 24px; padding: 32px 28px; border-radius: 28px; background: linear-gradient(120deg, #eef3fb, #f5f8fd 55%, #eaf6fe); }
@media (min-width: 768px) { .tr-jobs__cv { padding: 32px 40px; } }
body .tr-jobs__cv-title { font-size: 22px; font-weight: 600; line-height: 1.5; letter-spacing: -0.02em; color: var(--tr-navy); }
body .tr-jobs__cv-body { margin-top: 4px; font-size: 15px; line-height: 1.5; color: #4a6a96; }
.tr-reel.is-playing .tr-reel__copy { display: none; }
/* The video feature's Theta eyebrow has a 16px icon (18px elsewhere). */
.tr-vfeature .tr-eyebrow--theta { gap: 8px; }
.tr-vfeature .tr-eyebrow--theta::before { width: 16px; height: 16px; }

/* ==========================================================================
   0.6.0: Ray agent pages (src/sections/product.tsx Modes; heroes.tsx; PlatformTabs.tsx placeholder)
   ========================================================================== */
.tr-phero--ray .tr-phero__art > span:nth-child(2) { background: radial-gradient(closest-side, rgba(64, 168, 240, 0.28), transparent); }

/* Modes: three cards with a check badge, title, body and tag. */
.tr-modes { position: relative; overflow: hidden; background: #fff; padding: 96px 20px; }
@media (min-width: 768px) { .tr-modes { padding: 128px 48px; } }
.tr-modes__intro { max-width: 820px; margin-bottom: 48px; }
body .tr-modes__title { margin: 20px 0; font-size: clamp(34px, 5.2vw, 64px); line-height: 1.02; letter-spacing: -0.045em; }
body .tr-modes__body { margin-bottom: 16px; }
body .tr-modes__note { display: inline-flex; align-items: flex-start; gap: 10px; padding: 12px 16px; border-radius: 16px; background: rgba(56, 136, 255, 0.06); font-size: 14px; line-height: 1.6; color: var(--tr-blue-ink); }
@media (min-width: 768px) { body .tr-modes__note { font-size: 15px; } }
.tr-modes__note::before { content: ""; flex: none; width: 16px; height: 16px; margin-top: 4px; background: var(--tr-ray-icon) center / contain no-repeat; }
.tr-modes__grid { display: grid; gap: 16px; }
@media (min-width: 768px) { .tr-modes__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; } }
.tr-mode { position: relative; overflow: hidden; padding: 28px; border-radius: 28px; }
@media (min-width: 768px) { .tr-mode { padding: 32px; } }
body .tr-mode__title { margin: 0 0 12px; font-size: 20px; font-weight: 700; line-height: 1.5; letter-spacing: -0.02em; color: var(--tr-navy); }
@media (min-width: 768px) { body .tr-mode__title { font-size: 22px; } }
.tr-mode__title::before { content: ""; display: block; width: 40px; height: 40px; margin-bottom: 24px; border-radius: 16px; background: var(--tr-check-white) center / 16px 16px no-repeat, linear-gradient(135deg, #3888ff, #40a8f0); box-shadow: 0 10px 24px -10px rgba(56, 136, 255, 0.8); }
body .tr-mode__body { margin-bottom: 24px; font-size: 15px; line-height: 1.6; color: var(--tr-body-3); }
body .tr-mode__tag { display: inline-flex; padding: 6px 12px; border-radius: 999px; background: var(--tr-surface-2); font-size: 11px; font-weight: 700; line-height: 1.5; letter-spacing: 0.12em; text-transform: uppercase; color: var(--tr-blue-ink); }

/* Product video in a feature split (Ray Monitor Agent). */
.tr-split__video { position: relative; overflow: hidden; border-radius: 28px; background: #fff; box-shadow: 0 50px 100px -40px rgba(15, 27, 53, 0.55), 0 0 0 1px rgba(0, 0, 0, 0.05); }
.tr-split__video video { display: block; width: 100%; height: auto; }

/* Product visual placeholder (an animation still to come). */
.tr-vplaceholder { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; width: 100%; padding: 32px; background: linear-gradient(135deg, #f5f8fd, #eef3fb); text-align: center; }
.tr-vplaceholder img { width: 36px; height: 36px; opacity: 0.6; }
.tr-vplaceholder span { font-size: 13px; font-weight: 600; line-height: 1.5; color: var(--tr-muted-2); }

/* ==========================================================================
   0.7.0: HubSpot demo form, demo pop-up, glossary index, old content in the article layout
   ========================================================================== */

/* HubSpot demo form ([tr_demo_form]): a loading skeleton until HubSpot's frame is ready, an email if it can't load. */
.tr-hsform { position: relative; min-height: 240px; }
.tr-hsform__loading { display: grid; gap: 16px; }
.tr-hsform__loading span { height: 48px; border-radius: 16px; background: var(--tr-surface); animation: tr-pulse 1.6s ease-in-out infinite; }
.tr-hsform.is-ready, .tr-hsform.is-failed { min-height: 0; }
.tr-hsform.is-ready .tr-hsform__loading, .tr-hsform.is-failed .tr-hsform__loading { display: none; }
.tr-hsform__embed iframe { width: 100% !important; }
body .tr-hsform__failed { padding: 20px; border-radius: 16px; background: var(--tr-surface); font-size: 15px; line-height: 1.6; color: var(--tr-body); }
.tr-hsform__failed a { font-weight: 600; color: var(--tr-blue-ink); text-decoration: underline; text-underline-offset: 2px; }
@keyframes tr-pulse { 50% { opacity: 0.5; } }
@media (prefers-reduced-motion: reduce) { .tr-hsform__loading span { animation: none; } }
/* If HubSpot renders the form in the page instead of a frame: the same look. */
.tr-hsform .hs-form-field { margin-bottom: 18px; }
.tr-hsform .hs-form-field > label { display: block; margin-bottom: 6px; font-size: 13px; font-weight: 600; color: var(--tr-navy); }
.tr-hsform .hs-input:not([type="checkbox"]):not([type="radio"]) { box-sizing: border-box; width: 100% !important; min-height: 48px; padding: 0 16px; border: 1px solid rgba(34, 58, 117, 0.2); border-radius: 16px; background: #fff; font: inherit; font-size: 15px; color: var(--tr-navy); }
.tr-hsform textarea.hs-input { min-height: 140px; padding: 12px 16px; line-height: 1.6; }
.tr-hsform .hs-button { min-height: 48px; padding: 0 28px; border: 0; border-radius: 999px; background: var(--tr-blue); font: inherit; font-size: 15px; font-weight: 600; color: #fff; cursor: pointer; }
.tr-hsform .hs-error-msg, .tr-hsform .hs-error-msgs label { font-size: 13px; color: #c8002f; }
.tr-hsform .legal-consent-container { font-size: 12px; line-height: 1.6; color: #6b7a99; }

/* Demo pop-up (src/components/client/DemoPopup.tsx). */
.tr-demo-pop { position: fixed; inset: 0; z-index: 1000; display: flex; align-items: flex-end; justify-content: center; padding: 12px; }
.tr-demo-pop[hidden] { display: none; }
@media (min-width: 640px) { .tr-demo-pop { align-items: center; padding: 20px; } }
.tr-demo-pop__backdrop { position: absolute; inset: 0; background: rgba(15, 27, 53, 0.5); -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); animation: fade-in 0.3s ease-out; }
.tr-demo-pop__panel { position: relative; width: 100%; max-width: 620px; max-height: calc(100svh - 24px); overflow-y: auto; overscroll-behavior: contain; border-radius: 28px; background: #fff; box-shadow: 0 40px 80px -30px rgba(15, 27, 53, 0.55); animation: panel-in 0.45s var(--tr-ease-expo); }
.tr-demo-pop__panel:focus { outline: none; }
@media (prefers-reduced-motion: reduce) { .tr-demo-pop__backdrop, .tr-demo-pop__panel { animation: none; } }
.tr-demo-pop__bar { display: block; height: 6px; background: linear-gradient(90deg, #1a5fc4, #3888ff 50%, #40a8f0); }
.tr-demo-pop__close { position: absolute; top: 16px; right: 12px; display: flex; align-items: center; justify-content: center; width: 36px; height: 36px; padding: 0; border: 0; border-radius: 50%; background: transparent; color: var(--tr-navy); cursor: pointer; transition: background-color 0.2s; }
.tr-demo-pop__close:hover { background: var(--tr-surface); }
.tr-demo-pop__content { display: grid; gap: 20px; padding: 24px; }
@media (min-width: 640px) { .tr-demo-pop__content { padding: 32px; } }
.tr-demo-pop__content > * { margin: 0; }
body .tr-demo-pop__eyebrow { padding-right: 32px; font-size: 12px; font-weight: 700; line-height: 1.5; letter-spacing: 0.14em; text-transform: uppercase; color: var(--tr-blue-ink); }
body .tr-demo-pop__title { margin: -12px 0 0; padding-right: 32px; font-size: clamp(24px, 3.4vw, 32px); font-weight: 300; line-height: 1.12; letter-spacing: -0.03em; color: var(--tr-navy); }
body .tr-demo-pop__body { margin-top: -8px; font-size: 15px; line-height: 1.6; color: var(--tr-body); }
body .tr-demo-pop__actions { display: flex; flex-wrap: wrap; gap: 12px; }
.tr-demo-pop__dismiss { padding: 8px 12px; border: 0; background: transparent; font: inherit; font-size: 14px; font-weight: 600; color: var(--tr-body); cursor: pointer; transition: color 0.2s; }
.tr-demo-pop__dismiss:hover { color: var(--tr-navy); }
@media (max-width: 639px) { .tr-demo-pop__dismiss { width: 100%; } }

/* Glossary index (/glossary-of-terms/): letter bar and the terms from A to Z. */
.tr-glossary { background: #fff; padding: 48px 20px 96px; }
@media (min-width: 768px) { .tr-glossary { padding: 64px 48px 128px; } }
.tr-glossary__letters { position: sticky; top: 84px; z-index: 2; display: flex; flex-wrap: wrap; gap: 4px; margin-bottom: 48px; padding: 10px; border-radius: 20px; background: rgba(255, 255, 255, 0.9); box-shadow: 0 0 0 1px rgba(34, 58, 117, 0.08), 0 18px 40px -24px rgba(15, 27, 53, 0.3); -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px); }
@media (max-width: 767px) { .tr-glossary__letters { position: static; } }
.tr-glossary__letters a, .tr-glossary__letters span { display: flex; align-items: center; justify-content: center; min-width: 36px; height: 36px; padding: 0 8px; border-radius: 12px; font-size: 14px; font-weight: 700; }
.tr-glossary__letters a { color: var(--tr-navy); text-decoration: none; transition: background-color 0.2s; }
.tr-glossary__letters a:hover { background: var(--tr-surface); }
.tr-glossary__letters span { color: rgba(34, 58, 117, 0.25); }
.tr-glossary__groups { display: grid; gap: 40px; }
@media (min-width: 768px) { .tr-glossary__groups { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 48px 40px; } }
@media (min-width: 1024px) { .tr-glossary__groups { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.tr-glossary__group { scroll-margin-top: 160px; }
body .tr-glossary__letter { margin: 0 0 12px; padding-bottom: 12px; border-bottom: 1px solid rgba(34, 58, 117, 0.1); font-size: 32px; font-weight: 300; line-height: 1.1; letter-spacing: -0.03em; color: var(--tr-navy); }
.tr-glossary__list { display: grid; gap: 2px; margin: 0; padding: 0; list-style: none; }
.tr-glossary__list a { display: block; padding: 8px 0; font-size: 15px; font-weight: 500; line-height: 1.45; color: var(--tr-body); text-decoration: none; transition: color 0.2s; }
.tr-glossary__list a:hover { color: var(--tr-blue-ink); }

/* Old content kept live, in the article layout: no contents list when there are too few headings. */
.tr-article--plain .tr-article__body > :first-child { margin-top: 0; }


/* =============================================================================================
 * 0.9.0: the 25 Oct design update (Industries, Trust center, related picks, partner groups, survey charts)
 * ========================================================================================== */

/* ---------- Related picks on product pages: cards with a photo (ResourceGrid "image" layout) ---------- */
.tr-cover > .tr-cover__img { position: absolute; inset: 0; z-index: 1; margin: 0; }
.tr-cover > .tr-cover__img a { display: block; height: 100%; }
.tr-cover > .tr-cover__img img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--tr-ease-expo); }
.tr-related__copy { max-width: 720px; }
body .tr-related .tr-related__copy > .tr-related__title { margin-top: 16px; font-size: clamp(30px, 4vw, 48px); line-height: 1.05; letter-spacing: -0.04em; }
.tr-related__copy .tr-lead { margin-top: 16px; }
body .is-kind-report .tr-rcard__kind { color: #9b4090; }
body .is-kind-news .tr-rcard__kind { color: #1a5fc4; }
.tr-pos-center-top img { object-position: center top; }
.tr-pos-center-bottom img { object-position: center bottom; }

/* ---------- The ThetaRay pin or Ray mark in a product colour (BrandIcon) ---------- */
.tr-bicon { display: inline-block; flex: none; width: 15px; height: 15px; background: linear-gradient(150deg, var(--hue), var(--hue-ink)); -webkit-mask: var(--tr-theta-icon) center / contain no-repeat; mask: var(--tr-theta-icon) center / contain no-repeat; }
.tr-bicon.is-ray { -webkit-mask-image: var(--tr-ray-icon); mask-image: var(--tr-ray-icon); }

/* ---------- Partners by role (review round 8): the groups inline on the customer strip's marquee, each label just
   before its logos and a little more space before each label than between logos ---------- */
/* 44s: the customer strip's speed (about 57 px/s), the partner row being about 9% longer. */
.tr-marquee--groups .tr-marquee__track { gap: 96px; animation-duration: 44s; }
.tr-marquee__group { display: flex; flex: none; align-items: center; gap: 64px; margin: 0; padding: 0; list-style: none; }
body .tr-marquee__label { flex: none; margin: 0 -32px 0 0; white-space: nowrap; font-size: 11px; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase; color: var(--tr-blue-ink); }
@media (min-width: 768px) {
	.tr-marquee--groups .tr-marquee__track { gap: 112px; }
	.tr-marquee__group { gap: 80px; }
	body .tr-marquee__label { margin-right: -48px; }
}
/* Reduced motion: the strip stands still and wraps, as the customer strip does (its copies are hidden above), without
   the edge fade, which would wash out the logos at the ends of the wider rows. */
@media (prefers-reduced-motion: reduce) {
	.tr-marquee--groups { -webkit-mask-image: none; mask-image: none; }
	.tr-marquee--groups .tr-marquee__track { gap: 24px 64px; }
	.tr-marquee__group { flex: 0 1 auto; max-width: 100%; flex-wrap: wrap; justify-content: center; gap: 20px 40px; }
	body .tr-marquee__label { margin-right: -16px; }
}

/* ---------- Industries explorer ---------- */
.tr-ind { background: #fff; padding: 48px 20px 96px; }
@media (min-width: 768px) { .tr-ind { padding: 64px 48px 128px; } }
.tr-ind__grid { display: grid; gap: 32px; }
@media (min-width: 1024px) { .tr-ind__grid { grid-template-columns: 280px minmax(0, 1fr); gap: 48px; } }
.tr-ind__chips { display: flex; gap: 8px; margin: 0 -20px; padding: 0 20px 4px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; }
.tr-ind__chips::-webkit-scrollbar { display: none; }
@media (min-width: 1024px) { .tr-ind__chips { display: none; } }
.tr-ind__tab.is-chip { flex: none; scroll-snap-align: start; padding: 10px 16px; border: 0; border-radius: 999px; background: var(--tr-surface); box-shadow: 0 0 0 1px rgba(34, 58, 117, 0.08); font: inherit; font-size: 14px; font-weight: 600; color: var(--tr-navy); cursor: pointer; transition: background-color 0.2s, color 0.2s; }
.tr-ind__tab.is-chip[aria-selected="true"] { background: var(--tr-navy); color: #fff; box-shadow: none; }
.tr-ind__rail { display: none; }
@media (min-width: 1024px) { .tr-ind__rail { display: block; } }
.tr-ind__rail-inner { position: sticky; top: 112px; display: grid; gap: 28px; }
body .tr-ind__glabel { margin-bottom: 8px; padding: 0 12px; font-size: 11px; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: var(--tr-muted-2); }
.tr-ind__tabs { display: grid; gap: 2px; }
.tr-ind__tab:not(.is-chip) { display: flex; align-items: center; gap: 12px; width: 100%; padding: 6px 12px 6px 6px; border: 0; border-radius: 16px; background: transparent; font: inherit; font-size: 14.5px; line-height: 1.375; text-align: left; color: var(--tr-body); cursor: pointer; transition: background-color 0.2s, color 0.2s; }
.tr-ind__tab:not(.is-chip):hover { background: rgba(245, 248, 253, 0.7); color: var(--tr-navy); }
.tr-ind__tab:not(.is-chip)[aria-selected="true"] { background: var(--tr-surface); box-shadow: 0 0 0 1px rgba(34, 58, 117, 0.08); font-weight: 600; color: var(--tr-navy); }
.tr-ind__thumb { position: relative; flex: none; width: 40px; height: 40px; overflow: hidden; border-radius: 12px; background: var(--tr-surface); opacity: 0.7; transition: opacity 0.2s; }
.tr-ind__tab:hover .tr-ind__thumb, .tr-ind__tab[aria-selected="true"] .tr-ind__thumb { opacity: 1; }
.tr-ind__thumb img { width: 100%; height: 100%; object-fit: cover; }
.tr-ind__panels { min-width: 0; }
/* One panel at a time once theme.js runs (every panel stays in the page for search engines). */
.tr-tabset.is-ready .tr-ind__panel:not(.is-active), .tr-tabset.is-ready .tr-trust__panel:not(.is-active) { display: none; }
.tr-ind__panel + .tr-ind__panel { margin-top: 48px; }
.tr-tabset.is-ready .tr-ind__panel + .tr-ind__panel { margin-top: 0; }
.tr-tabset.is-ready .tr-ind__panel.is-active, .tr-tabset.is-ready .tr-trust__panel.is-active { animation: fade-up 0.6s var(--tr-ease-expo); }
.tr-ind__hero { position: relative; isolation: isolate; display: flex; align-items: flex-end; aspect-ratio: 4 / 5; overflow: hidden; border-radius: 28px; background: var(--tr-navy); }
@media (min-width: 640px) { .tr-ind__hero { aspect-ratio: 16 / 10; } }
@media (min-width: 1024px) { .tr-ind__hero { aspect-ratio: 16 / 9; } }
.tr-ind__photo { position: absolute; inset: 0; z-index: -2; margin: 0; }
.tr-ind__photo img { width: 100%; height: 100%; object-fit: cover; }
.tr-ind__hero::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(16, 29, 64, 0) 30%, rgba(16, 29, 64, 0.55) 60%, rgba(16, 29, 64, 0.92) 100%); }
.tr-ind__copy { padding: 24px; color: #fff; }
@media (min-width: 640px) { .tr-ind__copy { padding: 36px; } }
@media (min-width: 768px) { .tr-ind__copy { padding: 44px; } }
body .tr-ind__group { display: inline-flex; margin-bottom: 12px; padding: 4px 12px; border-radius: 999px; background: rgba(255, 255, 255, 0.15); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); font-size: 11px; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: #fff; }
body .tr-ind__title { max-width: 18ch; margin: 0; font-size: clamp(30px, 4.2vw, 52px); font-weight: 600; line-height: 1.02; letter-spacing: -0.035em; color: #fff; }
body .tr-ind__challenge { max-width: 46ch; margin-top: 16px; font-size: 16px; line-height: 1.55; color: rgba(255, 255, 255, 0.85); }
@media (min-width: 768px) { body .tr-ind__challenge { font-size: 18px; } }
.tr-ind__body { display: grid; gap: 24px; margin-top: 24px; }
@media (min-width: 768px) { .tr-ind__body { grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: 32px; } .tr-ind__body.is-single { grid-template-columns: minmax(0, 1fr); } }
.tr-ind__products { align-self: start; padding: 24px; border-radius: 24px; background: var(--tr-surface); box-shadow: 0 0 0 1px rgba(34, 58, 117, 0.07); }
@media (min-width: 768px) { .tr-ind__products { padding: 28px; } }
body .tr-ind__label { margin-bottom: 12px; font-size: 11px; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: var(--tr-muted-2); }
.tr-ind__plist { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; list-style: none; }
.tr-ind__product { display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px; border-radius: 999px; background: #fff; box-shadow: 0 0 0 1px rgba(34, 58, 117, 0.1); font-size: 14px; font-weight: 600; color: var(--tr-navy); text-decoration: none; transition: box-shadow 0.2s; }
.tr-ind__product:hover { box-shadow: 0 0 0 1px var(--tr-blue); }
.tr-ind__cta { margin-top: 24px; }
.tr-ind__cta .wp-block-button__link.wp-element-button { padding: 12px 20px; font-size: 14px; }
.tr-ind__plinks { display: grid; gap: 12px; margin: 0; padding: 0; list-style: none; }
.tr-ind__pcard { display: flex; align-items: center; gap: 16px; padding: 10px 20px 10px 10px; border-radius: 20px; background: #fff; box-shadow: 0 0 0 1px rgba(34, 58, 117, 0.09); text-decoration: none; transition: box-shadow 0.3s; }
.tr-ind__pcard:hover { box-shadow: 0 0 0 1px rgba(34, 58, 117, 0.09), var(--tr-shadow-pop); }
.tr-ind__pimg { position: relative; flex: none; width: 104px; height: 72px; overflow: hidden; border-radius: 14px; background: var(--tr-surface); }
.tr-ind__pimg img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.7s; }
.tr-ind__pcard:hover .tr-ind__pimg img { transform: scale(1.06); }
.tr-ind__pcopy { flex: 1; min-width: 0; }
.tr-ind__pkind { display: block; font-size: 11px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--tr-blue-ink); }
/* Not clamped: on the site the title's block display cancels its two-line clamp. */
.tr-ind__ptitle { display: block; margin-top: 2px; font-size: 15px; font-weight: 600; line-height: 1.35; color: var(--tr-navy); }
.tr-ind__parrow { color: var(--tr-blue-ink); transition: transform 0.3s; }
.tr-ind__pcard:hover .tr-ind__parrow { transform: translateX(4px); }

/* ---------- Trust center tabs (TrustBrowser) ---------- */
.tr-trust { background: #fff; padding: 96px 20px; }
@media (min-width: 768px) { .tr-trust { padding: 128px 48px; } }
.tr-trust__intro { max-width: 860px; margin-bottom: 48px; }
@media (min-width: 768px) { .tr-trust__intro { margin-bottom: 64px; } }
body .tr-trust__title { margin: 20px 0; font-size: clamp(34px, 5.2vw, 64px); line-height: 1.02; letter-spacing: -0.045em; }
.tr-trust__tabs { display: flex; gap: 4px; margin-bottom: 40px; overflow-x: auto; border-bottom: 1px solid rgba(34, 58, 117, 0.1); scrollbar-width: none; }
@media (min-width: 768px) { .tr-trust__tabs { margin-bottom: 48px; } }
.tr-trust__tab { position: relative; flex: none; min-height: 48px; padding: 0 16px; border: 0; background: none; font: inherit; font-size: 14px; font-weight: 600; white-space: nowrap; color: var(--tr-muted-2); cursor: pointer; transition: color 0.2s; }
.tr-trust__tab:hover, .tr-trust__tab[aria-selected="true"] { color: var(--tr-navy); }
.tr-trust__tab[aria-selected="true"]::after { content: ""; position: absolute; inset-inline: 12px; bottom: -1px; height: 2px; border-radius: 999px; background: var(--tr-navy); }
.tr-trust__panel + .tr-trust__panel { margin-top: 48px; }
.tr-tabset.is-ready .tr-trust__panel + .tr-trust__panel { margin-top: 0; }
.tr-trust__areas { gap: 16px; }
@media (min-width: 768px) { .tr-trust__areas { columns: 2; } }
.tr-trust__area { margin-bottom: 16px; padding: 24px; border-radius: 24px; break-inside: avoid; }
@media (min-width: 768px) { .tr-trust__area { padding: 28px; } }
.tr-trust__atitle { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 8px; margin: 0 0 16px; font-size: 19px; line-height: 1.5; font-weight: 700; letter-spacing: -0.02em; color: var(--tr-navy); }
.tr-trust__atitle span { font-size: 13px; font-weight: 500; letter-spacing: 0; color: var(--tr-muted-2); }
.tr-trust__reqs { display: grid; gap: 4px; margin: 0; padding: 0; list-style: none; }
.tr-trust__req { border-radius: 12px; transition: background-color 0.2s; }
.tr-trust__req[open] { background: #f5f8fd; }
.tr-trust__req summary, .tr-trust__sum { display: flex; align-items: flex-start; gap: 12px; margin: 0 -8px; padding: 8px; border-radius: 12px; list-style: none; }
.tr-trust__req summary { cursor: pointer; }
.tr-trust__req summary::-webkit-details-marker { display: none; }
.tr-trust__req summary:hover { background: #f5f8fd; }
.tr-trust__check { flex: none; margin-top: 3px; color: var(--tr-blue-ink); }
.tr-trust__rname { flex: 1; min-width: 0; font-size: 14.5px; line-height: 1.45; color: var(--tr-body-3); }
@media (min-width: 640px) { .tr-trust__rname { display: flex; align-items: flex-start; gap: 12px; } .tr-trust__rname > span:first-child { flex: 1; } }
.tr-trust__pills { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
@media (min-width: 640px) { .tr-trust__pills { justify-content: flex-end; margin-top: 0; } }
.tr-trust__pill { display: inline-flex; flex: none; align-items: center; gap: 6px; padding: 4px 10px; border-radius: 999px; box-shadow: 0 0 0 1px rgba(34, 58, 117, 0.14); font-size: 11.5px; font-weight: 600; white-space: nowrap; color: var(--tr-muted-2); }
.tr-trust__pill.is-blue { background: #eaf2ff; box-shadow: none; color: var(--tr-blue-ink); }
.tr-trust__dot { position: relative; width: 6px; height: 6px; border-radius: 50%; background: var(--tr-blue-ink); }
.tr-trust__dot::after { content: ""; position: absolute; inset: 0; border-radius: 50%; background: var(--tr-blue-ink); opacity: 0.4; animation: tr-ping 1s cubic-bezier(0, 0, 0.2, 1) infinite; }
@keyframes tr-ping { 75%, 100% { transform: scale(2); opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .tr-trust__dot::after { display: none; } }
.tr-trust__chev { flex: none; margin-top: 5px; color: var(--tr-muted-2); transition: transform 0.3s; }
.tr-trust__req[open] .tr-trust__chev { transform: rotate(180deg); }
.tr-trust__detail { display: grid; gap: 8px; padding: 0 12px 12px 26px; font-size: 13.5px; line-height: 1.6; color: var(--tr-body); }
.tr-trust__detail ul, .tr-trust__answer ul { display: grid; gap: 6px; margin: 0; padding-left: 20px; list-style: disc; }
.tr-trust__grid { display: grid; gap: 16px; margin: 0; padding: 0; list-style: none; }
@media (min-width: 768px) { .tr-trust__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .tr-trust__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.tr-trust__card { display: flex; align-items: center; gap: 16px; padding: 20px; border-radius: 22px; }
.tr-trust__card.is-top { align-items: flex-start; }
.tr-trust__doc { display: flex; flex: none; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: 16px; background: linear-gradient(150deg, #fff, #eef4fe); box-shadow: 0 0 0 1px rgba(34, 58, 117, 0.08); color: var(--tr-blue-ink); }
.tr-trust__name { flex: 1; min-width: 0; font-size: 15px; font-weight: 600; line-height: 1.35; color: var(--tr-navy); }
.tr-trust__copy { flex: 1; min-width: 0; }
.tr-trust__copy .tr-trust__name, .tr-trust__date, .tr-trust__link { display: block; }
.tr-trust__date { margin-top: 4px; font-size: 13px; color: var(--tr-muted-2); }
.tr-trust__link { margin-top: 12px; }
.tr-trust__portal { display: inline-flex; flex: none; align-items: center; gap: 6px; font-size: 13px; font-weight: 600; color: var(--tr-blue-ink); text-decoration: none; }
.tr-trust__portal:hover { text-decoration: underline; }
.tr-trust__subs { display: grid; gap: 16px; margin: 0; padding: 0; list-style: none; }
@media (min-width: 768px) { .tr-trust__subs { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.tr-trust__sub { padding: 28px; border-radius: 24px; }
.tr-trust__sub h3 { margin: 0; font-size: 22px; font-weight: 700; letter-spacing: -0.02em; color: var(--tr-navy); }
.tr-trust__sub p { margin: 8px 0 0; font-size: 15px; line-height: 1.6; color: var(--tr-body-3); }
.tr-trust__faqs { display: grid; gap: 12px; max-width: 920px; }
.tr-trust__faq { margin: 0; padding: 0 24px; border-radius: 22px; transition: box-shadow 0.3s; }
.tr-trust__faq[open] { box-shadow: 0 30px 60px -30px rgba(15, 27, 53, 0.35), 0 0 0 1px rgba(34, 58, 117, 0.06); }
.tr-trust__faq summary { display: flex; align-items: center; justify-content: space-between; gap: 24px; min-height: 64px; padding: 20px 0; list-style: none; font-size: 16px; font-weight: 600; text-align: left; color: var(--tr-navy); cursor: pointer; }
@media (min-width: 768px) { .tr-trust__faq summary { font-size: 17px; } }
.tr-trust__faq summary::-webkit-details-marker { display: none; }
.tr-trust__faq summary::after { content: "+"; display: flex; flex: none; align-items: center; justify-content: center; width: 32px; height: 32px; border-radius: 50%; background: var(--tr-surface-2); font-size: 18px; font-weight: 400; line-height: 1; color: var(--tr-blue-ink); transition: transform 0.5s var(--tr-ease-expo); }
.tr-trust__faq[open] summary::after { transform: rotate(45deg); }
.tr-trust__answer { display: grid; gap: 12px; padding: 0 40px 24px 0; font-size: 15px; font-weight: 300; line-height: 1.7; color: var(--tr-body); text-wrap: pretty; }
.tr-trust__answer p { margin: 0; }

/* ---------- Survey bar charts in articles (resource "bars" block) ---------- */
.tr-bars { margin: 40px 0; padding: 24px; border-radius: 24px; background: var(--tr-surface); box-shadow: 0 0 0 1px rgba(34, 58, 117, 0.07); }
@media (min-width: 768px) { .tr-bars { padding: 32px; } }
.tr-bars figcaption { margin: 0 0 24px; font-size: 16px; font-weight: 600; line-height: 1.45; color: var(--tr-navy); }
.tr-bars ul { display: grid; gap: 12px; margin: 0; padding: 0; list-style: none; }
.tr-bars li { display: grid; grid-template-columns: minmax(0, 9.5rem) 1fr; align-items: center; gap: 4px 16px; font-size: 14px; line-height: 1.5; }
@media (max-width: 639px) { .tr-bars li { grid-template-columns: 1fr; } }
.tr-bars__label { line-height: 1.375; color: var(--tr-body); }
.tr-bars__row { display: flex; align-items: center; gap: 12px; }
.tr-bars__track { flex: 1; height: 12px; overflow: hidden; border-radius: 999px; background: #fff; box-shadow: 0 0 0 1px rgba(34, 58, 117, 0.06); }
.tr-bars__track span { display: block; height: 100%; border-radius: 999px; background: linear-gradient(90deg, #1a5fc4, #3888ff 60%, #40a8f0); }
.tr-bars__value { flex: none; width: 56px; text-align: right; font-weight: 600; font-variant-numeric: tabular-nums; color: var(--tr-navy); }
.tr-bars__note { margin: 20px 0 0; font-size: 12px; color: var(--tr-muted-2); }


/* ---------- Resources library cards (ResourceBrowser "card" layout, 0.9.0): white card, cover strip, kind and topic,
 * title, summary, meta and arrow ---------- */
.tr-library .tr-post-grid { gap: 20px; }
@media (min-width: 1024px) { .tr-library .tr-post-grid { gap: 24px; } }
.tr-rcard--card { overflow: hidden; border: 1px solid rgba(34, 58, 117, 0.08); border-radius: 28px; background: #fff; box-shadow: 0 1px 0 rgba(255, 255, 255, 0.9) inset, 0 1px 2px rgba(15, 27, 53, 0.04), 0 18px 40px -18px rgba(15, 27, 53, 0.22); transition: transform 0.5s var(--tr-ease-expo), box-shadow 0.5s var(--tr-ease-expo); }
.tr-rcard--card:hover { transform: translateY(-4px); box-shadow: 0 1px 0 rgba(255, 255, 255, 0.9) inset, 0 1px 2px rgba(15, 27, 53, 0.04), 0 30px 60px -24px rgba(15, 27, 53, 0.3); }
.tr-rcard--card > .tr-cover--card { flex: none; aspect-ratio: 16 / 7; border-radius: 0; }
.tr-rcard--card .tr-cover__art { padding: 18px 24px; }
.tr-rcard__body { display: flex; flex: 1; flex-direction: column; padding: 20px 24px 24px; }
@media (min-width: 768px) { .tr-rcard__body { padding-inline: 28px; } }
.tr-rcard--card .tr-rcard__kicker { flex-wrap: nowrap; margin-top: 0; min-width: 0; white-space: nowrap; }
.tr-rcard--card .tr-rcard__topic { overflow: hidden; text-overflow: ellipsis; }
body .tr-rcard--card .tr-rcard__title { font-size: 19px; line-height: 1.28; }
.tr-rcard--card .tr-rcard__title a { text-decoration: none; }
body .tr-rcard__dek { margin-top: 12px; }
body .tr-rcard__dek p { display: -webkit-box; margin: 0; overflow: hidden; -webkit-line-clamp: 3; -webkit-box-orient: vertical; font-size: 14px; font-weight: 300; line-height: 1.6; color: var(--tr-body-2); }
.tr-rcard__dek .wp-block-post-excerpt__more-text { display: none; }
.tr-rcard--card .tr-rcard__meta { position: relative; justify-content: space-between; margin-top: auto; padding-top: 20px; padding-right: 24px; }
.tr-rcard--card .tr-rcard__meta::after { content: "\2192"; position: absolute; right: 0; bottom: 0; font-size: 15px; font-weight: 600; line-height: 1.5; color: var(--tr-blue-ink); transition: transform 0.5s var(--tr-ease-expo); }
.tr-rcard--card:hover .tr-rcard__meta::after { transform: translateX(4px); }


/* ---------- Glossary A to Z (GlossaryBrowser, 0.9.0) ---------- */
.tr-gloss { background: #fff; padding: 24px 20px 96px; }
@media (min-width: 768px) { .tr-gloss { padding: 24px 48px 128px; } }
.tr-gloss__bar { position: sticky; top: 76px; z-index: 10; margin: 0 -20px 40px; padding: 12px 20px 16px; border-bottom: 1px solid rgba(34, 58, 117, 0.08); background: rgba(255, 255, 255, 0.9); -webkit-backdrop-filter: blur(24px); backdrop-filter: blur(24px); }
@media (min-width: 768px) { .tr-gloss__bar { top: 88px; margin-inline: -48px; padding-inline: 48px; } }
.tr-gloss__tools { display: flex; flex-direction: column; gap: 12px; }
@media (min-width: 1024px) { .tr-gloss__tools { flex-direction: row; align-items: center; } }
.tr-gloss__search { position: relative; display: block; }
@media (min-width: 1024px) { .tr-gloss__search { flex: none; width: 340px; } }
.tr-gloss__search svg { position: absolute; left: 16px; top: 50%; translate: 0 -50%; color: var(--tr-muted-2); pointer-events: none; }
.tr-gloss__search input { width: 100%; height: 44px; padding: 0 16px 0 44px; border: 0; border-radius: 999px; background: var(--tr-surface); box-shadow: 0 0 0 1px rgba(34, 58, 117, 0.1); font: inherit; font-size: 15px; color: var(--tr-navy); outline: none; transition: box-shadow 0.2s; }
.tr-gloss__search input::placeholder { color: var(--tr-muted-2); }
.tr-gloss__search input:focus { box-shadow: 0 0 0 2px var(--tr-blue); }
.tr-gloss__cats { display: flex; gap: 6px; margin: 0 -4px; padding: 0 4px; overflow-x: auto; scrollbar-width: none; }
.tr-gloss__cat { flex: none; padding: 8px 14px; border: 0; border-radius: 999px; background: var(--tr-surface); box-shadow: 0 0 0 1px rgba(34, 58, 117, 0.08); font: inherit; font-size: 13px; font-weight: 600; color: var(--tr-navy); cursor: pointer; transition: background-color 0.2s, color 0.2s; }
.tr-gloss__cat:hover { background: #fff; }
.tr-gloss__cat[aria-pressed="true"] { background: var(--tr-navy); box-shadow: none; color: #fff; }
.tr-gloss__letters { display: flex; flex-wrap: wrap; gap: 2px; margin-top: 12px; }
.tr-gloss__letters > * { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 8px; font-size: 13px; font-weight: 700; }
.tr-gloss__letters a { color: var(--tr-blue-ink); text-decoration: none; transition: background-color 0.2s; }
.tr-gloss__letters a:hover { background: var(--tr-surface); }
.tr-gloss__letters span, .tr-gloss__letters a.is-empty { color: rgba(34, 58, 117, 0.22); pointer-events: none; }
.tr-gloss__empty { padding: 64px 0; text-align: center; font-size: 16px; color: var(--tr-muted-2); }
.tr-gloss__groups { display: grid; gap: 56px; }
.tr-gloss__group { display: grid; gap: 24px; scroll-margin-top: 192px; }
@media (min-width: 768px) { .tr-gloss__group { grid-template-columns: 120px 1fr; } }
.tr-gloss__group[hidden] { display: none; }
.tr-gloss__group h2 { margin: 0; font-size: 56px; font-weight: 300; line-height: 1; letter-spacing: -0.04em; color: rgba(34, 58, 117, 0.25); }
@media (min-width: 768px) { .tr-gloss__group h2 { font-size: 72px; } }
.tr-gloss__group ul { display: grid; gap: 12px; margin: 0; padding: 0; list-style: none; }
@media (min-width: 640px) { .tr-gloss__group ul { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1280px) { .tr-gloss__group ul { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.tr-gloss__group li[hidden] { display: none; }
.tr-gloss__card { display: flex; flex-direction: column; height: 100%; padding: 20px; border-radius: 22px; background: var(--tr-surface); box-shadow: 0 0 0 1px rgba(34, 58, 117, 0.06); text-decoration: none; transition: box-shadow 0.3s; }
.tr-gloss__card:hover { box-shadow: 0 0 0 1px rgba(34, 58, 117, 0.06), var(--tr-shadow-pop); }
.tr-gloss__head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.tr-gloss__term { font-size: 20px; font-weight: 600; line-height: 1.25; letter-spacing: -0.02em; color: var(--tr-navy); transition: color 0.2s; }
.tr-gloss__card:hover .tr-gloss__term { color: var(--tr-blue-ink); }
.tr-gloss__region { flex: none; margin-top: 2px; padding: 2px 8px; border-radius: 999px; background: #fff; box-shadow: 0 0 0 1px rgba(34, 58, 117, 0.08); font-size: 11px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--tr-muted-2); }
.tr-gloss__name { margin-top: 4px; font-size: 14px; font-weight: 600; color: var(--tr-body); }
.tr-gloss__def { display: -webkit-box; margin-top: 12px; overflow: hidden; -webkit-line-clamp: 3; -webkit-box-orient: vertical; font-size: 14px; line-height: 1.55; color: var(--tr-body); }

/* ---------- A glossary term (GlossaryTerm) ---------- */
.tr-gterm { position: relative; overflow: hidden; padding: 112px 20px 80px; background: linear-gradient(180deg, #fff, #f4f7fd 70%, #fff); }
@media (min-width: 768px) { .tr-gterm { padding: 148px 48px 112px; } }
.tr-gterm::before { content: ""; position: absolute; right: -12%; top: -20%; width: 560px; height: 560px; border-radius: 50%; background: radial-gradient(closest-side, rgba(56, 136, 255, 0.14), transparent); filter: blur(60px); pointer-events: none; }
.tr-gterm > .tr-container { position: relative; }
.tr-gterm__crumbs { display: flex; align-items: center; gap: 8px; margin-bottom: 40px; font-size: 13px; font-weight: 600; color: var(--tr-muted-2); }
@media (min-width: 768px) { .tr-gterm__crumbs { margin-bottom: 56px; } }
.tr-gterm__crumbs a { color: inherit; text-decoration: none; transition: color 0.2s; }
.tr-gterm__crumbs a:hover, .tr-gterm__crumbs > span:last-child { color: var(--tr-navy); }
.tr-gterm__grid { display: grid; gap: 48px; }
@media (min-width: 1024px) { .tr-gterm__grid { grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 64px; } .tr-gterm__main { grid-column: span 8; } .tr-gterm__aside { grid-column: span 4; padding-top: 96px; } }
.tr-gterm__tags { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.tr-gterm__tags .tr-eyebrow { margin: 0; }
body .tr-gterm__region { margin: 0; padding: 4px 10px; border-radius: 999px; background: #fff; box-shadow: 0 0 0 1px rgba(34, 58, 117, 0.1); font-size: 11px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--tr-muted-2); }
body .tr-gterm__title { margin: 20px 0 0; font-size: clamp(44px, 6vw, 80px); font-weight: 300; line-height: 1; letter-spacing: -0.045em; color: var(--tr-navy); }
.tr-gterm__title strong { font-weight: 700; }
.tr-gterm__name { display: block; margin-top: 12px; font-size: clamp(22px, 2.4vw, 32px); font-weight: 300; line-height: 1.2; letter-spacing: -0.025em; color: var(--tr-body); -webkit-text-fill-color: currentColor; }
body .tr-gterm__def { max-width: 760px; margin-top: 32px; font-size: 20px; font-weight: 300; line-height: 1.6; color: var(--tr-navy); }
@media (min-width: 768px) { body .tr-gterm__def { font-size: 23px; } }
/* Links in rich text (Rich LINK): semibold blue ink, light underline. */
.tr-gterm__def a, .tr-gterm__p a, .tr-brief__summary a { font-weight: 600; color: var(--tr-blue-ink); text-decoration: underline; text-decoration-color: rgba(26, 95, 196, 0.35); text-decoration-thickness: 1px; text-underline-offset: 3px; transition: text-decoration-color 0.15s; }
.tr-gterm__def a:hover, .tr-gterm__p a:hover, .tr-brief__summary a:hover { text-decoration-color: var(--tr-blue-ink); }
.tr-gterm__why { max-width: 720px; margin-top: 48px; padding-top: 40px; border-top: 1px solid rgba(34, 58, 117, 0.1); }
body .tr-gterm__why > .tr-gterm__label { margin: 0 0 20px; font-size: 13px; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: var(--tr-muted-2); }
body .tr-gterm__p { margin: 0 0 20px; font-size: 17px; line-height: 1.75; color: var(--tr-body); }
body .tr-gterm__p:last-child { margin-bottom: 0; }
.tr-gterm__aside { display: grid; align-content: start; gap: 16px; }
.tr-gterm__label { display: block; font-size: 11px; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: var(--tr-muted-2); }
.tr-gterm__source, .tr-gterm__related { display: block; padding: 24px; border-radius: 22px; background: #fff; box-shadow: 0 0 0 1px rgba(34, 58, 117, 0.09); text-decoration: none; transition: box-shadow 0.3s; }
.tr-gterm__source:hover { box-shadow: 0 0 0 1px rgba(34, 58, 117, 0.09), var(--tr-shadow-pop); }
.tr-gterm__stitle { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; margin-top: 8px; font-size: 16px; font-weight: 600; line-height: 1.375; color: var(--tr-navy); transition: color 0.2s; }
.tr-gterm__stitle span { color: var(--tr-blue-ink); }
.tr-gterm__source:hover .tr-gterm__stitle { color: var(--tr-blue-ink); }
.tr-gterm__host { display: block; margin-top: 4px; overflow: hidden; font-size: 13px; text-overflow: ellipsis; white-space: nowrap; color: var(--tr-muted-2); }
.tr-gterm__related h2 { margin: 0; line-height: 1.5; }
.tr-gterm__related ul { display: flex; flex-wrap: wrap; gap: 8px; margin: 12px 0 0; padding: 0; list-style: none; }
.tr-gterm__related a { display: inline-flex; padding: 8px 14px; border-radius: 999px; background: var(--tr-surface); box-shadow: 0 0 0 1px rgba(34, 58, 117, 0.08); font-size: 14px; font-weight: 600; color: var(--tr-navy); text-decoration: none; transition: background-color 0.2s, box-shadow 0.2s; }
.tr-gterm__related a:hover { background: #fff; box-shadow: 0 0 0 1px var(--tr-blue); }
.tr-gterm__product { display: flex; align-items: center; gap: 16px; padding: 24px; border-radius: 22px; background: linear-gradient(150deg, #eef4ff, #dce8fd); box-shadow: 0 0 0 1px rgba(56, 136, 255, 0.18); color: var(--tr-navy); text-decoration: none; transition: box-shadow 0.3s; }
.tr-gterm__product:hover { box-shadow: 0 0 0 1px rgba(56, 136, 255, 0.18), var(--tr-shadow-pop); }
.tr-gterm__picon { display: grid; flex: none; place-items: center; width: 44px; height: 44px; border-radius: 16px; background: #fff; box-shadow: 0 6px 16px -8px rgba(34, 58, 117, 0.35); }
.tr-gterm__picon .tr-bicon { width: 20px; height: 20px; }
.tr-gterm__pcopy { flex: 1; min-width: 0; }
.tr-gterm__pname { display: block; margin-top: 4px; font-size: 17px; font-weight: 600; }
.tr-gterm__pcta { display: block; margin-top: 2px; font-size: 13px; font-weight: 600; color: var(--tr-blue-ink); }
.tr-arrow-text { color: var(--tr-blue-ink); transition: transform 0.3s; }
.tr-gterm__product:hover .tr-arrow-text { transform: translateX(4px); }

/* ---------- AML in Focus (BriefingList) ---------- */
.tr-briefs { background: #fff; padding: 32px 20px 96px; }
@media (min-width: 768px) { .tr-briefs { padding: 32px 48px 128px; } }
.tr-briefs__list { display: grid; gap: 24px; }
@media (min-width: 768px) { .tr-briefs__list { gap: 32px; } }
.tr-brief { display: grid; align-items: center; gap: 24px; padding: 16px; border-radius: 28px; background: var(--tr-surface); box-shadow: 0 0 0 1px rgba(34, 58, 117, 0.06); scroll-margin-top: 112px; }
@media (min-width: 768px) { .tr-brief { grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: 40px; padding: 20px 40px 20px 20px; } }
.tr-brief:target { box-shadow: 0 0 0 2px var(--tr-blue); }
.tr-brief__video { position: relative; aspect-ratio: 16 / 9; overflow: hidden; border-radius: 20px; background: var(--tr-navy); }
.tr-brief__video .wp-block-image, .tr-brief__video figure { height: 100%; margin: 0; }
.tr-brief__video img { width: 100%; height: 100%; object-fit: cover; }
.tr-brief__copy { padding: 0 8px 12px; }
@media (min-width: 768px) { .tr-brief__copy { padding: 16px 0; } }
.tr-brief__date { font-size: 12px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--tr-blue-ink); }
body .tr-brief__title { margin: 12px 0 0; font-size: clamp(21px, 2vw, 27px); font-weight: 600; line-height: 1.22; letter-spacing: -0.02em; color: var(--tr-navy); text-wrap: pretty; }
.tr-brief__summary { display: grid; gap: 12px; margin-top: 16px; font-size: 15.5px; line-height: 1.65; color: var(--tr-body); }
.tr-brief__summary p { margin: 0; }
.tr-brief__summary a { color: var(--tr-blue-ink); }
body .tr-brief__cta { margin-top: 24px; font-size: 14px; font-weight: 600; }
.tr-brief__cta a { color: var(--tr-blue-ink); text-decoration: none; }

/* ======================================================================
   Solutions capability map (28 Oct design: src/sections/solutions.tsx, SolutionExplorer.tsx). A rail of solutions
   (chips on phones), then one panel: the solution with the product at work, the pain points next to the outcome,
   and proof. Colours come from the panel's tr-hue-* class (its first product's family).
   ====================================================================== */
.tr-sol { background: #fff; padding: 64px 20px 96px; }
@media (min-width: 768px) { .tr-sol { padding: 80px 48px 128px; } }
.tr-sol__intro { max-width: 860px; margin-bottom: 48px; }
@media (min-width: 768px) { .tr-sol__intro { margin-bottom: 64px; } }
body .tr-sol__heading { margin: 20px 0; font-size: clamp(34px, 5.2vw, 64px); line-height: 1.02; letter-spacing: -0.045em; text-wrap: balance; }
body .tr-sol__body { font-size: 17px; font-weight: 300; line-height: 1.65; color: var(--tr-body); }
@media (min-width: 768px) { body .tr-sol__body { font-size: 19px; } }
.tr-sol__grid { display: grid; gap: 24px; }
@media (min-width: 1024px) { .tr-sol__grid { grid-template-columns: 260px minmax(0, 1fr); gap: 48px; } }
.tr-sol__chips { display: flex; gap: 8px; margin: 0 -20px; padding: 0 20px 8px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; }
.tr-sol__chips::-webkit-scrollbar { display: none; }
@media (min-width: 1024px) { .tr-sol__chips { display: none; } }
.tr-sol__tab.is-chip { flex: none; scroll-snap-align: start; padding: 10px 16px; border: 0; border-radius: 999px; background: var(--tr-surface); box-shadow: 0 0 0 1px rgba(34, 58, 117, 0.08); font: inherit; font-size: 14px; font-weight: 600; color: var(--tr-navy); cursor: pointer; transition: background-color 0.2s, color 0.2s; }
.tr-sol__tab.is-chip[aria-selected="true"] { background: var(--tr-navy); color: #fff; box-shadow: none; }
.tr-sol__rail { display: none; }
@media (min-width: 1024px) { .tr-sol__rail { display: block; } }
.tr-sol__tabs { position: sticky; top: 112px; display: grid; gap: 2px; }
.tr-sol__tab:not(.is-chip) { display: flex; align-items: center; gap: 12px; width: 100%; padding: 6px 12px 6px 6px; border: 0; border-radius: 16px; background: transparent; font: inherit; font-size: 14.5px; line-height: 1.375; text-align: left; color: var(--tr-body); cursor: pointer; transition: background-color 0.2s, color 0.2s; }
.tr-sol__tab:not(.is-chip):hover { background: rgba(245, 248, 253, 0.6); color: var(--tr-navy); }
.tr-sol__tab:not(.is-chip)[aria-selected="true"] { background: var(--tr-surface); font-weight: 600; color: var(--tr-navy); }
.tr-sol__ticon { display: flex; flex: none; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 12px; background: rgba(var(--hue-rgb), 0.14); opacity: 0.7; transition: opacity 0.2s; }
.tr-sol__tab:hover .tr-sol__ticon, .tr-sol__tab[aria-selected="true"] .tr-sol__ticon { opacity: 1; }
.tr-sol__ticon .tr-bicon { width: 18px; height: 18px; }
.tr-sol__panels { min-width: 0; }
.tr-sol__panel + .tr-sol__panel { margin-top: 48px; }
.tr-tabset.is-ready .tr-sol__panel:not(.is-active) { display: none; }
.tr-tabset.is-ready .tr-sol__panel + .tr-sol__panel { margin-top: 0; }
.tr-tabset.is-ready .tr-sol__panel.is-active { animation: fade-up 0.6s var(--tr-ease-expo); }
/* Stage: the solution next to the product doing it (one column between 1024 and 1280, where the rail takes room). */
.tr-sol__stage { display: grid; overflow: hidden; border-radius: 28px; background: linear-gradient(150deg, rgba(var(--hue-rgb), 0.1), rgba(var(--hue-rgb), 0.03) 60%, #fff); box-shadow: 0 0 0 1px rgba(34, 58, 117, 0.07); }
@media (min-width: 768px) { .tr-sol__stage:not(.is-single) { grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); } }
@media (min-width: 1024px) { .tr-sol__stage:not(.is-single) { grid-template-columns: minmax(0, 1fr); } }
@media (min-width: 1280px) { .tr-sol__stage:not(.is-single) { grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); } }
.tr-sol__copy { display: flex; flex-direction: column; padding: 28px; }
@media (min-width: 768px) { .tr-sol__copy { padding: 36px; } }
@media (min-width: 1024px) { .tr-sol__copy { padding: 40px; } }
body .tr-sol__search { align-self: flex-start; margin: 0; padding: 4px 12px; border-radius: 999px; background: #fff; box-shadow: 0 0 0 1px rgba(34, 58, 117, 0.08); font-size: 13px; font-weight: 600; color: var(--hue-ink); }
body .tr-sol__title { margin: 16px 0 0; font-size: clamp(30px, 3.6vw, 46px); font-weight: 600; line-height: 1.04; letter-spacing: -0.035em; color: var(--tr-navy); }
body .tr-sol__capability { margin: 16px 0 0; font-size: 16px; line-height: 1.6; color: var(--tr-body); }
@media (min-width: 768px) { body .tr-sol__capability { font-size: 17px; } }
/* No label above the product buttons (round 6): the list keeps the label's place at the foot of the copy. */
.tr-sol__products { display: flex; flex-wrap: wrap; gap: 8px; margin: auto 0 0; padding: 28px 0 0; list-style: none; }
.tr-sol__product { display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px; border-radius: 999px; background: #fff; box-shadow: 0 0 0 1px rgba(34, 58, 117, 0.1); font-size: 14px; font-weight: 600; color: var(--tr-navy); text-decoration: none; transition: box-shadow 0.3s, transform 0.3s; }
.tr-sol__product:hover { transform: translateY(-1px); box-shadow: 0 0 0 1px rgba(34, 58, 117, 0.1), var(--tr-shadow-pop); }
.tr-sol__product .tr-bicon { width: 15px; height: 15px; }
.tr-sol__cta { margin-top: 24px; }
.tr-sol__cta .wp-block-button__link.wp-element-button { padding: 12px 20px; font-size: 14px; }
.tr-sol__visual { display: flex; align-items: center; padding: 0 20px 20px; }
@media (min-width: 768px) { .tr-sol__visual { padding: 28px 28px 28px 0; } }
@media (min-width: 1024px) { .tr-sol__visual { padding: 0 28px 28px; } }
@media (min-width: 1280px) { .tr-sol__visual { padding: 28px 28px 28px 0; } }
.tr-sol__visual > * { width: 100%; }
.tr-sol__visual .tr-visual { overflow: hidden; border-radius: 20px; background: #fff; box-shadow: 0 30px 60px -34px rgba(15, 27, 53, 0.45), 0 0 0 1px rgba(34, 58, 117, 0.07); }
/* The pain points, then the outcome. Hovering a pain point crosses it off. */
.tr-sol__compare { display: grid; gap: 24px; margin-top: 24px; }
@media (min-width: 768px) { .tr-sol__compare { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.tr-sol__box { padding: 24px; border-radius: 24px; background: var(--tr-surface); box-shadow: 0 0 0 1px rgba(34, 58, 117, 0.06); }
@media (min-width: 768px) { .tr-sol__box { padding: 28px; } }
.tr-sol__box--value { background: #fff; box-shadow: 0 24px 48px -32px rgba(15, 27, 53, 0.3), 0 0 0 1px rgba(34, 58, 117, 0.07); }
body .tr-sol__blabel { margin: 0 0 16px; font-size: 15px; font-weight: 700; letter-spacing: -0.01em; color: var(--tr-navy); }
body .tr-sol__blabel--value { color: var(--hue-ink); }
.tr-sol__pains, .tr-sol__values { display: grid; gap: 4px; margin: 0; padding: 0; list-style: none; }
.tr-sol__pains li { display: flex; gap: 12px; margin: 0 -12px; padding: 8px 12px; border-radius: 12px; font-size: 15.5px; line-height: 1.5; color: var(--tr-navy); outline: none; cursor: default; transition: background-color 0.3s; }
/*
 * Pain points and business values are written in pairs (28 Oct): theme.js marks the hovered or focused pair with
 * is-on on both sides (the pain point is crossed off, its value lights up) and the other values dim.
 */
.tr-sol__pains li.is-on { background: #fff; }
.tr-sol__x { flex: none; margin-top: 3px; color: var(--tr-muted-2); transition: color 0.3s, transform 0.3s; }
.tr-sol__pains li.is-on .tr-sol__x { transform: rotate(90deg); }
.tr-sol__ptext { text-decoration: line-through; text-decoration-color: transparent; text-decoration-thickness: 1.5px; transition: text-decoration-color 0.3s, color 0.3s; }
.tr-sol__pains li.is-on .tr-sol__ptext { color: var(--tr-muted-2); text-decoration-color: var(--hue-ink); }
.tr-sol__values li { display: flex; gap: 12px; margin: 0 -12px; padding: 8px 12px; border-radius: 12px; font-size: 15.5px; font-weight: 600; line-height: 1.45; color: var(--tr-navy); cursor: default; transition: background-color 0.3s, color 0.3s, opacity 0.3s, transform 0.3s; }
.tr-sol__values li.is-on { background: rgba(var(--hue-rgb), 0.1); color: var(--hue-ink); transform: translateX(4px); }
.tr-sol__compare.has-pair .tr-sol__values li:not(.is-on) { opacity: 0.45; }
.tr-sol__check { display: flex; flex: none; align-items: center; justify-content: center; width: 20px; height: 20px; margin-top: 2px; border-radius: 50%; background: rgba(var(--hue-rgb), 0.14); color: var(--hue-ink); transition: background-color 0.3s, color 0.3s, transform 0.3s; }
.tr-sol__values li.is-on .tr-sol__check { background: var(--hue-ink); color: #fff; transform: scale(1.12); }
/* Without the script, hovering a pain point still crosses it off. */
.tr-sol__compare:not(.is-paired) .tr-sol__pains li:is(:hover, :focus-visible) { background: #fff; }
.tr-sol__compare:not(.is-paired) .tr-sol__pains li:is(:hover, :focus-visible) .tr-sol__x { transform: rotate(90deg); }
.tr-sol__compare:not(.is-paired) .tr-sol__pains li:is(:hover, :focus-visible) .tr-sol__ptext { color: var(--tr-muted-2); text-decoration-color: var(--hue-ink); }
.tr-sol__proof { margin-top: 32px; }
.tr-sol__plinks { display: grid; gap: 12px; margin: 0; padding: 0; list-style: none; }
@media (min-width: 768px) { .tr-sol__plinks { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.tr-sol__plinks .tr-ind__pcard { height: 100%; }

/* Demo and press pages: the "From ... to ..." points under the intro (28 Oct design). */
body .tr-contact__body:has(+ .tr-contact__points) { margin-bottom: 20px; }
.tr-contact__points { display: grid; gap: 12px; margin: 0; padding: 0; list-style: none; }
.tr-contact__points li { display: flex; gap: 12px; font-size: 16px; font-weight: 600; line-height: 1.45; color: var(--tr-navy); }
.tr-contact__check { display: flex; flex: none; align-items: center; justify-content: center; width: 20px; height: 20px; margin-top: 2px; border-radius: 50%; background: rgba(56, 136, 255, 0.12); color: var(--tr-blue-ink); }

/* ======================================================================
   Campaign pages (review round 11): /14-day-agentic-investigations-pilot/ and /roi-calculator/ (dev/campaign-pages.tsx)
   ====================================================================== */
/* A personal note: heading beside a quote card with the person's photo, name and title. */
.tr-note { padding: 80px 20px; background: #fff; }
@media (min-width: 768px) { .tr-note { padding: 112px 48px; } }
.tr-note__grid { display: grid; gap: 32px; }
@media (min-width: 1024px) { .tr-note__grid { grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); gap: 64px; align-items: start; } }
body .tr-note__title { margin: 0; font-size: clamp(30px, 3.8vw, 46px); }
.tr-note__card { padding: 28px 24px; border-radius: 28px; }
@media (min-width: 768px) { .tr-note__card { padding: 44px 48px; } }
.tr-note__quote { margin: 0; padding: 0 0 0 24px; border-left: 2px solid var(--tr-pink); }
.tr-note__quote p { margin: 0; font-size: 17px; font-weight: 300; line-height: 1.65; color: var(--tr-body-2); }
.tr-note__quote p + p { margin-top: 16px; }
@media (min-width: 768px) { .tr-note__quote p { font-size: 19px; } }
.tr-note__quote p:first-child::before { content: "\201C"; }
.tr-note__quote p:last-child::after { content: "\201D"; }
.tr-note__card .tr-quote__by { margin-top: 28px; }
.tr-note__card .tr-quote__photo img { width: 56px; height: 56px; border-radius: 50%; object-fit: cover; }
body .tr-note__card .tr-quote__photo { width: 56px; height: 56px; }
body .tr-note__card .tr-quote__cite { font-size: 14px; line-height: 1.5; }

/* The benchmark: sample inputs, then the results as stat cards and the link to the calculator. */
.tr-roibench__intro { max-width: 760px; margin-bottom: 32px; }
body .tr-roibench__intro .tr-sgrid__title { margin-bottom: 16px; }
.tr-roibench__inputs { margin-bottom: 16px; padding: 20px 24px; border-radius: 20px; background: #fff; box-shadow: 0 0 0 1px rgba(34, 58, 117, 0.08); }
body .tr-roibench__label { margin: 0 0 12px; font-size: 11px; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: var(--tr-blue-ink); }
.tr-roibench__list { display: grid; gap: 12px 32px; margin: 0; }
@media (min-width: 640px) { .tr-roibench__list { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.tr-roibench__list div { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 4px 16px; padding-bottom: 12px; border-bottom: 1px solid var(--tr-line); }
.tr-roibench__list dt { font-size: 14px; color: var(--tr-body); }
.tr-roibench__list dd { margin: 0; font-size: 20px; font-weight: 700; letter-spacing: -0.02em; color: var(--tr-navy); font-variant-numeric: tabular-nums; }
.tr-roibench__results { grid-template-columns: minmax(0, 1fr); }
@media (min-width: 768px) { .tr-roibench__results { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.tr-roibench__cta { margin-top: 32px; }

/* The pilot's scope: three numbered step cards, side by side from 900 px, stacked below. */
.tr-scope { padding: 80px 20px; background: #fff; }
@media (min-width: 768px) { .tr-scope { padding: 112px 48px; } }
.tr-scope__intro { max-width: 760px; margin-bottom: 40px; }
body .tr-scope__title { margin: 0 0 16px; font-size: clamp(30px, 3.8vw, 46px); }
.tr-scope__grid { display: grid; gap: 16px; }
@media (min-width: 900px) { .tr-scope__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; } }
.tr-scope__card { display: flex; flex-direction: column; padding: 28px 24px; border-radius: 24px; }
@media (min-width: 768px) { .tr-scope__card { padding: 32px 28px; } }
body .tr-scope__step { display: flex; align-items: center; gap: 12px; margin: 0 0 20px; font-size: 12px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--tr-blue-ink); }
.tr-scope__num { display: flex; flex: none; align-items: center; justify-content: center; width: 32px; height: 32px; border-radius: 10px; background: var(--tr-navy); font-size: 14px; letter-spacing: 0; color: #fff; }
body .tr-scope__name { margin: 0 0 12px; font-size: 21px; font-weight: 700; line-height: 1.3; letter-spacing: -0.02em; color: var(--tr-navy); }
.tr-scope__tag { display: block; margin-top: 4px; font-size: 14px; font-weight: 600; letter-spacing: 0; color: var(--tr-muted-2); }
body .tr-scope__body { margin: 0; font-size: 15px; line-height: 1.6; color: var(--tr-body); }

/* Two resources: a webinar that plays in place and a blog post. */
.tr-pair { padding: 80px 20px; background: linear-gradient(180deg, #f5f8fd, #ffffff); }
@media (min-width: 768px) { .tr-pair { padding: 112px 48px; } }
.tr-pair__intro { max-width: 820px; margin-bottom: 40px; }
body .tr-pair__heading { margin: 0 0 16px; font-size: clamp(30px, 3.8vw, 46px); }
.tr-pair__grid { display: grid; gap: 20px; }
@media (min-width: 900px) { .tr-pair__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; } }
.tr-pair__card { display: flex; flex-direction: column; overflow: hidden; border-radius: 28px; }
.tr-pair__card .tr-pair__media { border-radius: 0; box-shadow: none; }
.tr-pair__card .tr-vplayer::before { display: none; }
.tr-pair__cobrand { display: flex; align-items: center; justify-content: center; gap: 24px; aspect-ratio: 16 / 9; padding: 32px; background: linear-gradient(140deg, #eef3fb, #f8fafe); }
.tr-pair__logo { display: block; height: clamp(22px, 3.2vw, 32px); background: var(--tr-navy); -webkit-mask: var(--src) center / contain no-repeat; mask: var(--src) center / contain no-repeat; }
.tr-pair__x { font-size: 24px; font-weight: 300; color: var(--tr-muted-2); }
.tr-pair__copy { display: flex; flex: 1; flex-direction: column; padding: 28px 24px 32px; }
@media (min-width: 768px) { .tr-pair__copy { padding: 32px 36px 36px; } }
body .tr-pair__kicker { margin: 0 0 10px; font-size: 11px; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: var(--tr-blue-ink); }
body .tr-pair__title { margin: 0 0 12px; font-size: 22px; font-weight: 700; line-height: 1.3; letter-spacing: -0.02em; color: var(--tr-navy); }
.tr-pair__title a { color: inherit; text-decoration: none; }
.tr-pair__title a:hover { color: var(--tr-blue-ink); }
body .tr-pair__body { margin: 0; font-size: 15px; line-height: 1.65; color: var(--tr-body); }
.tr-pair__cta { margin-top: auto; padding-top: 24px; }

/* The form section: heading beside the HubSpot form card (the demo page's card); the buttons scroll to it (the page's
   scroll-padding-top clears the header). */
.tr-formpanel__grid { display: grid; gap: 32px; }
@media (min-width: 1024px) {
	.tr-formpanel__grid { grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.3fr); gap: 64px; }
	.tr-formpanel__intro { position: sticky; top: 128px; align-self: start; }
}
body .tr-formpanel .tr-contact__title { margin-top: 0; }

/* ---------- The Ray ROI calculator (.tr-roi: the original's markup and ids, which its script needs) ---------- */
.tr-roicalc { padding: 56px 20px 80px; background: linear-gradient(180deg, #f5f8fd, #eef3fb); }
@media (min-width: 768px) { .tr-roicalc { padding: 72px 48px 112px; } }
.tr-roi { max-width: 1180px; margin-inline: auto; }
.tr-roi__layout { display: grid; gap: 24px; align-items: start; }
@media (min-width: 1024px) { .tr-roi__layout { grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr); gap: 28px; } }
.tr-roi .card { padding: 24px 20px; border-radius: 24px; background: #fff; border: 1px solid rgba(34, 58, 117, 0.08); box-shadow: 0 18px 40px -18px rgba(15, 27, 53, 0.22); }
@media (min-width: 768px) { .tr-roi .card { padding: 32px; } }
.tr-roi .card + .card { margin-top: 20px; }
.tr-roi h2 { display: flex; align-items: center; gap: 12px; margin: 0 0 6px; font-size: 19px; font-weight: 700; line-height: 1.3; letter-spacing: -0.02em; color: var(--tr-navy); }
.tr-roi h2 .num { display: inline-flex; flex: none; align-items: center; justify-content: center; width: 28px; height: 28px; border-radius: 9px; background: var(--tr-surface-2); font-size: 13px; color: var(--tr-blue-ink); }
.tr-roi .sub { margin: 0 0 20px; font-size: 14px; line-height: 1.55; color: var(--tr-muted); }
.tr-roi .chip-label { margin: 0 0 10px; font-size: 11px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--tr-muted-2); }
.tr-roi .chip-row { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 20px; }
.tr-roi .chip { display: inline-flex; align-items: center; gap: 6px; padding: 9px 15px; border: 1.5px solid var(--tr-line); border-radius: 999px; background: #fff; font: 600 13.5px/1.2 inherit; color: var(--tr-navy); cursor: pointer; user-select: none; transition: background 0.15s, border-color 0.15s, color 0.15s; }
.tr-roi .chip:hover { border-color: var(--tr-blue); }
.tr-roi .chip.active { border-color: var(--tr-navy); background: var(--tr-navy); color: #fff; }
.tr-roi .chip.active:hover { background: var(--tr-navy-900); }
.tr-roi .chip .tick { font-size: 12px; }
.tr-roi .chip.add-custom { border-style: dashed; border-color: rgba(56, 136, 255, 0.45); color: var(--tr-blue-ink); }
.tr-roi .chip.add-custom:hover { border-color: var(--tr-blue); background: #eef4ff; }
.tr-roi .chip:focus-visible, .tr-roi .remove-btn:focus-visible, .tr-roi .advanced-toggle:focus-visible { outline: 2px solid var(--tr-blue); outline-offset: 2px; }
.tr-roi .wf-list { display: flex; flex-direction: column; gap: 12px; }
.tr-roi .wf-empty { padding: 24px 16px; border: 1.5px dashed var(--tr-line); border-radius: 16px; background: var(--tr-surface); text-align: center; font-size: 14px; color: var(--tr-muted); }
.tr-roi .wf-row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 12px; align-items: end; padding: 14px; border: 1px solid var(--tr-line); border-radius: 16px; background: var(--tr-surface); }
.tr-roi .wf-row > :first-child, .tr-roi .wf-row .wf-name-field { grid-column: 1 / -1; }
.tr-roi .wf-row > .remove-btn, .tr-roi .wf-row .wf-del-field { grid-column: 1 / -1; justify-self: end; }
@media (min-width: 640px) {
	.tr-roi .wf-row { grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr) minmax(0, 1fr) 36px; }
	.tr-roi .wf-row > :first-child, .tr-roi .wf-row .wf-name-field, .tr-roi .wf-row > .remove-btn, .tr-roi .wf-row .wf-del-field { grid-column: auto; }
}
.tr-roi .field { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.tr-roi .field label { font-size: 11px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--tr-muted-2); }
.tr-roi .wf-title { padding: 10px 0 10px 2px; font-size: 15px; font-weight: 700; color: var(--tr-navy); }
.tr-roi input[type="number"], .tr-roi input[type="text"] { width: 100%; min-height: 44px; padding: 0 12px; border: 1.5px solid rgba(34, 58, 117, 0.16); border-radius: 12px; background: #fff; font: 500 15px/1.2 inherit; color: var(--tr-navy); outline: none; transition: border-color 0.15s, box-shadow 0.15s; }
.tr-roi input:focus { border-color: var(--tr-blue); box-shadow: 0 0 0 3px rgba(56, 136, 255, 0.18); }
.tr-roi .remove-btn { display: flex; flex: none; align-items: center; justify-content: center; width: 36px; height: 36px; border: 1.5px solid var(--tr-line); border-radius: 10px; background: #fff; font-size: 18px; line-height: 1; color: var(--tr-muted); cursor: pointer; transition: background 0.15s, border-color 0.15s, color 0.15s; }
.tr-roi .remove-btn:hover { border-color: var(--tr-pink); background: #fdebf7; color: #c8007f; }
.tr-roi .assump-grid { display: grid; gap: 16px 18px; }
@media (min-width: 640px) { .tr-roi .assump-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }
.tr-roi .prefix-wrap { position: relative; }
.tr-roi .prefix { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); font-size: 15px; color: var(--tr-muted-2); pointer-events: none; }
.tr-roi .prefix-wrap input { padding-left: 26px; }
.tr-roi .advanced-toggle { grid-column: 1 / -1; display: inline-flex; align-items: center; gap: 6px; width: fit-content; padding: 0; border: 0; background: none; font: 600 13px/1.4 inherit; color: var(--tr-blue-ink); cursor: pointer; }
.tr-roi .advanced-toggle .car { display: inline-block; font-size: 10px; transition: transform 0.15s; }
.tr-roi .advanced-toggle.open .car { transform: rotate(90deg); }
.tr-roi .advanced-panel { grid-column: 1 / -1; display: none; }
.tr-roi .advanced-panel.open { display: grid; gap: 16px; }
@media (min-width: 640px) { .tr-roi .advanced-panel.open { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }
.tr-roi .slider-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 10px; }
.tr-roi .slider-head label { font-size: 11px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--tr-muted-2); }
.tr-roi .slider-head .val { font-size: 18px; font-weight: 700; color: var(--tr-blue-ink); font-variant-numeric: tabular-nums; }
.tr-roi input[type="range"] { -webkit-appearance: none; appearance: none; width: 100%; height: 6px; margin: 8px 0; border-radius: 4px; background: linear-gradient(90deg, var(--tr-blue) 0%, var(--tr-blue) var(--fill, 60%), rgba(34, 58, 117, 0.14) var(--fill, 60%)); outline: none; cursor: pointer; }
.tr-roi input[type="range"]::-webkit-slider-thumb { -webkit-appearance: none; width: 22px; height: 22px; border: 4px solid var(--tr-blue); border-radius: 50%; background: #fff; box-shadow: 0 2px 6px rgba(15, 27, 53, 0.25); }
.tr-roi input[type="range"]::-moz-range-thumb { width: 14px; height: 14px; border: 4px solid var(--tr-blue); border-radius: 50%; background: #fff; }
.tr-roi input[type="range"]:focus-visible { box-shadow: 0 0 0 3px rgba(56, 136, 255, 0.25); }
.tr-roi .hint { margin: 10px 0 0; font-size: 13px; line-height: 1.55; color: var(--tr-muted); }
.tr-roi .impact-wrap { min-width: 0; }
@media (min-width: 1024px) { .tr-roi .impact-wrap { position: sticky; top: 112px; } }
.tr-roi .impact-card { padding: 28px 22px 24px; border-radius: 24px; background: linear-gradient(160deg, var(--tr-navy-900), var(--tr-navy)); box-shadow: 0 30px 60px -30px rgba(15, 27, 53, 0.6); color: #fff; }
@media (min-width: 768px) { .tr-roi .impact-card { padding: 32px 28px 28px; } }
.tr-roi .impact-card h2 { color: #fff; }
.tr-roi .impact-card h2 .num { background: rgba(255, 255, 255, 0.14); color: #fff; }
.tr-roi .impact-card .sub { margin-bottom: 20px; color: #b9c4e0; }
.tr-roi .hero-stat { margin-bottom: 18px; padding: 20px; border: 1px solid rgba(255, 255, 255, 0.14); border-radius: 16px; background: rgba(255, 255, 255, 0.06); }
.tr-roi .hero-stat .label { margin-bottom: 8px; font-size: 12px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: #aec0e6; }
.tr-roi .hero-stat .value { font-size: clamp(34px, 4vw, 44px); font-weight: 700; line-height: 1; letter-spacing: -0.03em; background: var(--tr-ink-light); -webkit-background-clip: text; background-clip: text; color: transparent; font-variant-numeric: tabular-nums; }
.tr-roi .hero-stat .note { margin-top: 10px; font-size: 12.5px; color: #9fb1d6; }
.tr-roi .bar-compare { margin-bottom: 20px; }
.tr-roi .bar-row + .bar-row { margin-top: 12px; }
.tr-roi .bar-label { display: flex; justify-content: space-between; gap: 12px; margin-bottom: 6px; font-size: 13px; color: #cbd6ed; }
.tr-roi .bar-label strong { font-weight: 700; color: #fff; font-variant-numeric: tabular-nums; }
.tr-roi .bar-track { height: 12px; overflow: hidden; border-radius: 7px; background: rgba(255, 255, 255, 0.1); }
.tr-roi .bar-fill { height: 100%; border-radius: 7px; transition: width 0.5s cubic-bezier(0.4, 0, 0.2, 1); }
.tr-roi .bar-fill.today { width: 100%; background: linear-gradient(90deg, #b4cded, var(--tr-blue)); }
.tr-roi .bar-fill.ray { width: 30%; background: linear-gradient(90deg, var(--tr-ray-light), var(--tr-ray)); }
.tr-roi .mini-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 10px; }
.tr-roi .mini-stat { padding: 13px 14px; border: 1px solid rgba(255, 255, 255, 0.1); border-radius: 14px; background: rgba(255, 255, 255, 0.05); }
.tr-roi .mini-stat .v { font-size: 20px; font-weight: 700; font-variant-numeric: tabular-nums; }
.tr-roi .mini-stat .l { margin-top: 4px; font-size: 12px; line-height: 1.35; color: #aec0e6; }
/* Why the numbers hold up: four stat cards. */
.tr-roiproof__head { margin-bottom: 32px; text-align: center; }
.tr-roiproof__eyebrow { margin: 0 0 8px; font-size: 12px; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase; color: var(--tr-blue-ink); }
.tr-roiproof__title { margin: 0; font-size: clamp(26px, 3vw, 36px); font-weight: 300; letter-spacing: -0.03em; color: var(--tr-navy); }
.tr-roiproof__ctx { margin: 0 0 14px; font-size: 11px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--tr-muted-2); }
body .tr-roiproof__grid .tr-sgrid__value { margin: 0; font-size: clamp(28px, 3vw, 36px); }
body .tr-roiproof__grid .tr-sgrid__label { margin-bottom: 0; }
/* How it works: dark band with the four steps, one case and the footnote. */
.tr-roiwhy { padding: 80px 20px; background: var(--tr-navy-900); color: #fff; }
@media (min-width: 768px) { .tr-roiwhy { padding: 112px 48px; } }
.tr-roiwhy__eyebrow { margin: 0 0 12px; font-size: 12px; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase; color: var(--tr-ray-light); }
.tr-roiwhy__title { max-width: 820px; margin: 0 0 16px; font-size: clamp(28px, 3.6vw, 44px); font-weight: 300; line-height: 1.1; letter-spacing: -0.035em; color: #fff; }
.tr-roiwhy__lead { max-width: 820px; margin: 0 0 32px; font-size: 16px; font-weight: 300; line-height: 1.7; color: #c6d1ec; }
.tr-roiwhy__steps { display: grid; gap: 16px; margin: 0 0 24px; padding: 0; list-style: none; counter-reset: roiwhy; }
@media (min-width: 640px) { .tr-roiwhy__steps { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .tr-roiwhy__steps { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.tr-roiwhy__step { padding: 22px 20px; border: 1px solid rgba(255, 255, 255, 0.12); border-radius: 20px; background: rgba(255, 255, 255, 0.045); counter-increment: roiwhy; }
.tr-roiwhy__step::before { content: counter(roiwhy); display: flex; align-items: center; justify-content: center; width: 30px; height: 30px; margin-bottom: 14px; border-radius: 9px; background: rgba(96, 216, 255, 0.16); font-size: 13px; font-weight: 700; color: var(--tr-ray-light); }
.tr-roiwhy__step h3 { margin: 0 0 8px; font-size: 16px; font-weight: 700; line-height: 1.35; color: #fff; }
.tr-roiwhy__step p { margin: 0; font-size: 14px; line-height: 1.6; color: #aeb9d6; }
.tr-roiwhy__case { margin-bottom: 24px; padding: 22px 24px; border: 1px solid rgba(96, 216, 255, 0.28); border-left: 3px solid var(--tr-ray-light); border-radius: 16px; background: rgba(96, 216, 255, 0.07); }
.tr-roiwhy__case p { margin: 0; font-size: 15px; line-height: 1.7; color: #dce3f5; }
.tr-roiwhy__case .tr-roiwhy__label { margin-bottom: 10px; font-size: 11.5px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--tr-ray-light); }
.tr-roiwhy__foot { max-width: 900px; margin: 0; padding-top: 18px; border-top: 1px solid rgba(255, 255, 255, 0.12); font-size: 13.5px; line-height: 1.6; color: #8fa0c4; }
.tr-roinote { padding: 32px 20px 48px; background: #fff; }
.tr-roinote__text { margin: 0 auto; font-size: 13px; line-height: 1.6; text-align: center; color: var(--tr-muted-2); }

/* ======================================================================
   Review round 12: phones (360 to 430 px)
   ====================================================================== */

/* Gradient text (background-clip: text) is painted only inside its element's box. With the headings' negative
   letter-spacing the box ends before the last letter does, so the right arm of a final "y" was cut (the Glossary's
   "glossary", review round 12; the homepage "g" in round 1), and in a tight line-height a descender can reach below
   it. One rule for every gradient word and value: 0.1em more box on each side and 0.2em below, taken back by the
   margins, so nothing moves (the hero's words are inline-blocks, so their bottom margin counts too). A phrase that
   wraps gets the room on every line (clone), so the last letter before a line break isn't cut either; each line then
   has the whole gradient. */
body :is(h1, h2, .tr-platform__closing, .tr-hstage__title, .tr-compare__closing) strong { padding: 0 0.1em 0.2em; margin: 0 -0.1em -0.2em; -webkit-box-decoration-break: clone; box-decoration-break: clone; }
body :is(.tr-stat__value, .tr-sgrid__value, .tr-scard__value, .tr-live__mvalue, .tr-astat__value), .tr-roi .hero-stat .value { padding: 0 0.1em 0.2em; margin: 0 -0.1em -0.2em; }

/* Decorative glows (a blurred ::before set 24px outside a video, say) mustn't widen the page past a phone's screen:
   each full-width section clips what goes past its sides. clip (unlike hidden) can't be scrolled, keeps position:
   sticky working and leaves shadows above and below alone. */
.tr-section { overflow-x: clip; }

/* Words that must stay on one line ("Proof-of-Concept" on the pilot page). */
.tr-nowrap { white-space: nowrap; }

/* Stat cards: a value wraps between its words ("Up to / 70%") and never runs past its card. Below 1024 px the cards
   share a row two by two, and a card whose value has a word too long for half the row ("Immediate") takes the whole
   row, as does the one left over at the end. */
body :is(.tr-stat__value, .tr-astat__value, .tr-scard__value, .tr-sgrid__value) { white-space: normal; overflow-wrap: break-word; text-wrap: balance; }
@media (max-width: 1023px) {
	.tr-stats { display: flex; flex-wrap: wrap; }
	.tr-stats > .tr-stat { flex: 1 1 calc(50% - 8px); min-width: min-content; max-width: 100%; }
}

/* The same for the two tiles beside a product's live feed (Theta Screen's "milliseconds"). */
@media (max-width: 1023px) {
	.tr-live__tiles { display: flex; flex-wrap: wrap; }
	.tr-live__tiles > * { flex: 1 1 calc(50% - 8px); min-width: min-content; max-width: 100%; }
}
body .tr-live__hvalue { overflow-wrap: break-word; }

/* Post content (blog, AML in Focus, news, resources, glossary): images, video and embeds shrink to the column, long
   words and URLs break, and a table wider than the column scrolls in its own box (theme.js), with a fade and an arrow
   at the edge while there is more. :where() keeps any styled image or table as it is. */
:where(.tr-post-body) :where(img, video, iframe, embed, object, svg, canvas, figure, .wp-block-embed__wrapper) { max-width: 100%; }
:where(.tr-post-body) :where(img, video) { height: auto; }
:where(.tr-post-body) :where(p, li, h1, h2, h3, h4, h5, h6, blockquote, figcaption, dd, dt, a, cite) { overflow-wrap: break-word; }
:where(.tr-post-body) pre { max-width: 100%; overflow-x: auto; }
.tr-table { position: relative; }
.tr-table__scroll { overflow-x: auto; overscroll-behavior-x: contain; border-radius: 20px; }
.tr-table__scroll:focus-visible { outline-offset: 2px; }
.tr-table__more { position: absolute; top: 0; right: 0; bottom: 0; width: 64px; border-radius: 0 20px 20px 0; background: linear-gradient(to left, rgba(255, 255, 255, 0.96), rgba(255, 255, 255, 0)); opacity: 0; pointer-events: none; transition: opacity 0.3s; }
.tr-table__more::after { content: "\2192"; position: absolute; top: 14px; right: 10px; display: flex; align-items: center; justify-content: center; width: 28px; height: 28px; border-radius: 50%; background: #fff; box-shadow: 0 4px 12px -4px rgba(15, 27, 53, 0.35), 0 0 0 1px rgba(34, 58, 117, 0.08); font-size: 14px; font-weight: 600; line-height: 1; color: var(--tr-blue-ink); }
.tr-table.is-scrollable:not(.is-end) .tr-table__more { opacity: 1; }