/* =============================================================================
   TEN DIGITALS - HOMEPAGE
   Eleven sections, in the locked order from Production Bible Volume 01 section 4.
   ========================================================================== */

/* -----------------------------------------------------------------------------
   01 HERO  -  TD_Hero + TD_TenForm
   -------------------------------------------------------------------------- */

.td-hero {
	align-items: center;
	display: flex;
	isolation: isolate;
	min-height: min(100svh, 920px);
	overflow: hidden;
	padding-block: calc(var(--td-header-h) + var(--td-hero-top)) clamp(56px, 6vw, 96px);
	position: relative;
}

.td-hero__grid {
	display: grid;
	gap: clamp(40px, 5vw, 72px);
	grid-template-columns: minmax(0, 1fr);
	position: relative;
	z-index: 2;
}

@media (min-width: 1024px) {
	.td-hero__grid {
		align-items: center;
		grid-template-columns: minmax(0, 1.3fr) minmax(0, 0.7fr);
	}
}

.td-hero__copy { display: flex; flex-direction: column; gap: var(--td-s-5); max-width: 680px; }

.td-hero__title {
	font-size: var(--td-fs-hero);
	font-weight: var(--td-weight-heading, 700);
	letter-spacing: var(--td-tracking-hero);
	line-height: var(--td-lh-tight);
	text-transform: uppercase;
	text-wrap: balance;
}

/* BUILD. GROW. AUTOMATE. INNOVATE. SCALE. - the last word carries the brand
   gradient so the lifecycle resolves visually into the mark. */
.td-hero__title .td-word { display: inline-block; }
.td-hero__title .td-word--accent { background: var(--td-grad-text); -webkit-background-clip: text; background-clip: text; color: transparent; }

.td-hero__lead {
	color: var(--td-ink-2);
	font-size: var(--td-fs-lead);
	max-width: 54ch;
}

.td-hero__micro {
	align-items: center;
	color: var(--td-ink-3);
	display: flex;
	font-size: var(--td-fs-xs);
	gap: 8px;
}

.td-hero__micro svg { color: var(--td-accent); height: 14px; width: 14px; }

/* Desktop: the whole hero fits on the first screen, whatever the screen's
   height. Same approach as the page heroes in sections.css. */
@media (min-width: 1024px) {
	.td-hero { min-height: min(100svh, 1080px); }
	.td-hero__copy { gap: clamp(12px, 2.4svh, 28px); max-width: 860px; }
	.td-hero__title { font-size: min(var(--td-fs-hero), 9.4svh); }
	.td-hero__lead { font-size: min(var(--td-fs-lead), 2.3svh + 0.3rem); }
}

/* Brand mark stage.
   Removed outright below 1024px: on a phone the hero is the headline, the lead
   and the two CTAs, and an ornament that size earns nothing but scroll. */
.td-hero__stage { display: none; }

@media (min-width: 1024px) {
	.td-hero__stage {
		aspect-ratio: 1;
		display: block;
		margin-inline: auto;
		max-width: min(540px, 34vw, 62svh);
		position: relative;
		width: 100%;
	}
}

/* Pointer parallax is written to these two custom properties by ten-form.js;
   with no JS they stay at 0 and the mark simply sits still. */
.td-hero__mark {
	display: block;
	inset: 0;
	position: absolute;
	transform: translate3d(var(--td-mark-x, 0px), var(--td-mark-y, 0px), 0);
	transition: transform 1200ms var(--td-ease-out);
	z-index: 1;
}

.td-hero__form {
	animation: td-mark-float 12s var(--td-ease) infinite;
	filter: drop-shadow(0 28px 56px rgba(0, 0, 0, 0.5));
	height: 100%;
	object-fit: contain;
	width: 100%;
}

@keyframes td-mark-float {
	0%, 100% { transform: translateY(-1.1%) rotate(-0.7deg); }
	50%      { transform: translateY(1.1%) rotate(0.7deg); }
}

@media (prefers-reduced-motion: reduce) {
	.td-hero__form { animation: none; }
	.td-hero__mark { transition: none; }
}

.td-hero__scroll {
	align-items: center;
	bottom: clamp(20px, 3vw, 36px);
	color: var(--td-ink-3);
	display: none;
	font-size: 0.6875rem;
	gap: 10px;
	left: var(--td-gutter);
	letter-spacing: var(--td-tracking-eyebrow);
	position: absolute;
	text-transform: uppercase;
	z-index: 3;
}

@media (min-width: 1024px) { .td-hero__scroll { display: flex; } }

.td-hero__scroll-rail {
	background: var(--td-line-2);
	border-radius: 1px;
	height: 40px;
	overflow: hidden;
	position: relative;
	width: 1px;
}

.td-hero__scroll-rail::after {
	animation: td-scroll-cue 2.4s var(--td-ease) infinite;
	background: var(--td-grad-brand);
	content: "";
	inset-inline: 0;
	height: 16px;
	position: absolute;
	top: -16px;
}

@keyframes td-scroll-cue {
	0%   { transform: translateY(0); opacity: 0; }
	30%  { opacity: 1; }
	100% { transform: translateY(56px); opacity: 0; }
}

/* -----------------------------------------------------------------------------
   02 TRUST  -  TD_TrustStrip
   -------------------------------------------------------------------------- */

.td-trust { border-bottom: 1px solid var(--td-line); }

.td-trust__head {
	display: grid;
	gap: var(--td-s-4);
	margin-bottom: var(--td-s-7);
	max-width: 760px;
}

.td-trust__title {
	font-size: var(--td-fs-h3);
	letter-spacing: var(--td-tracking-head);
}

.td-trust__logo {
	align-items: center;
	display: flex;
	flex: none;
	height: 56px;
	justify-content: center;
	opacity: 0.62;
	transition: opacity var(--td-t-standard) var(--td-ease),
	            filter var(--td-t-standard) var(--td-ease);
}

.td-trust__logo img { max-height: 100%; object-fit: contain; width: auto; }
.td-trust__logo:hover { opacity: 1; }

/* Placeholder slots until client logo permissions are verified (Vol 01 s23). */
.td-trust__slot {
	align-items: center;
	border: 1px dashed var(--td-line-2);
	border-radius: var(--td-r-btn);
	color: var(--td-ink-4);
	display: flex;
	flex: none;
	font-family: var(--td-font-mono);
	font-size: 0.6875rem;
	height: 56px;
	justify-content: center;
	letter-spacing: 0.1em;
	min-width: 150px;
	padding-inline: 20px;
	text-transform: uppercase;
}

/* -----------------------------------------------------------------------------
   03 GOAL SELECTOR  -  TD_GoalSelector
   -------------------------------------------------------------------------- */

.td-goals__grid {
	display: grid;
	gap: var(--td-s-4);
	grid-template-columns: minmax(0, 1fr);
}

@media (min-width: 640px)  { .td-goals__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .td-goals__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--td-s-5); } }

.td-goal {
	align-items: flex-start;
	display: flex;
	flex-direction: column;
	gap: var(--td-s-3);
	padding: clamp(24px, 2.4vw, 34px);
	text-align: left;
	text-decoration: none;
	width: 100%;
}

/* Heading left, figure right, on one row. The figure is what gives the card its
   height now, so there is no floor to hold it open and nothing to fill. */
.td-goal__head {
	align-items: center;
	display: flex;
	gap: var(--td-s-4);
	justify-content: space-between;
	width: 100%;
}

.td-goal__heading {
	display: grid;
	gap: var(--td-s-2);
	min-width: 0;
}

.td-goal__index {
	color: var(--td-ink-4);
	font-family: var(--td-font-mono);
	font-size: var(--td-fs-xs);
	letter-spacing: 0.1em;
}

.td-goal__title {
	font-family: var(--td-font-display);
	font-size: clamp(1.375rem, 1.1rem + 1vw, 1.875rem);
	font-weight: var(--td-weight-heading, 700);
	letter-spacing: var(--td-tracking-head);
	line-height: 1.1;
	text-transform: uppercase;
}

.td-goal__copy { color: var(--td-ink-2); font-size: var(--td-fs-sm); }

.td-goal__figure {
	display: block;
	flex: none;
	pointer-events: none;
	width: clamp(84px, 38%, 128px);
}

.td-goal__figure .td-iso {
	display: block;
	height: auto;
	transition: transform var(--td-t-standard) var(--td-ease-spring);
	width: 100%;
}

.td-goal:hover .td-goal__figure .td-iso,
.td-goal.is-selected .td-goal__figure .td-iso { transform: translateY(-4px) scale(1.04); }

@media (prefers-reduced-motion: reduce) {
	.td-goal:hover .td-goal__figure .td-iso,
	.td-goal.is-selected .td-goal__figure .td-iso { transform: none; }
}

/* The recommendation line sits under the copy rather than being pushed to the
   floor of the card. It reserves its space either way, so margin-top:auto was
   not buying anything except a gap between the copy and the thing that is
   about to appear below it. */
.td-goal__rec {
	color: var(--td-ink-4);
	font-size: var(--td-fs-xs);
	line-height: 1.5;
	opacity: 0;
	transform: translateY(6px);
	transition: opacity var(--td-t-standard) var(--td-ease),
	            transform var(--td-t-standard) var(--td-ease-out);
}

/* Nothing hovers on a touch screen, so the line would never be read there. It
   is already holding the space; on those devices it may as well be legible. */
@media (hover: none) {
	.td-goal__rec { opacity: 1; transform: none; }
}

.td-goal:hover .td-goal__rec,
.td-goal:focus-within .td-goal__rec,
.td-goal.is-selected .td-goal__rec { opacity: 1; transform: none; }

.td-goal.is-selected {
	border-color: var(--td-hairline-accent);
	box-shadow: var(--td-card-shadow-hover);
}

.td-goal.is-selected .td-goal__title { color: var(--td-accent); }

.td-goal__mark {
	border: 1.5px solid var(--td-hairline-accent);
	border-radius: 5px;
	height: 14px;
	opacity: 0;
	position: absolute;
	right: 22px;
	top: 22px;
	transform: rotate(45deg) scale(0.6);
	transition: opacity var(--td-t-standard) var(--td-ease),
	            transform var(--td-t-standard) var(--td-ease-spring);
	width: 14px;
}

.td-goal:hover .td-goal__mark,
.td-goal.is-selected .td-goal__mark { opacity: 1; transform: rotate(45deg) scale(1); }
.td-goal.is-selected .td-goal__mark { background: var(--td-grad-brand); border-color: transparent; }

.td-goals__foot {
	align-items: center;
	display: flex;
	flex-wrap: wrap;
	gap: var(--td-s-4);
	justify-content: space-between;
	margin-top: var(--td-s-7);
}

.td-goals__status { color: var(--td-ink-3); font-size: var(--td-fs-sm); }
.td-goals__status strong { color: var(--td-accent); font-weight: 600; }

/* -----------------------------------------------------------------------------
   04 TEN DIMENSIONS  -  TD_TenDimensions
   Desktop: numeral-anchored list drives a detail panel.
   Mobile: accessible accordion - never hover-dependent (Vol 01 s8).
   -------------------------------------------------------------------------- */

.td-dimensions__layout {
	display: grid;
	gap: var(--td-s-6);
	grid-template-columns: minmax(0, 1fr);
}

@media (min-width: 1024px) {
	.td-dimensions__layout {
		align-items: start;
		gap: var(--td-s-8);
		grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
	}
}

.td-dimensions__list {
	display: grid;
	gap: 0;
	grid-template-columns: repeat(2, minmax(0, 1fr));
}

@media (min-width: 1024px) { .td-dimensions__list { grid-template-columns: minmax(0, 1fr); } }

.td-dim {
	align-items: baseline;
	border-bottom: 1px solid var(--td-line);
	display: flex;
	gap: var(--td-s-4);
	padding: 14px 12px;
	position: relative;
	text-align: left;
	transition: background-color var(--td-t-micro) var(--td-ease),
	            padding-left var(--td-t-standard) var(--td-ease-out);
	width: 100%;
}

.td-dim::before {
	background: var(--td-grad-brand);
	content: "";
	inset-block: 0;
	left: 0;
	position: absolute;
	transform: scaleY(0);
	transition: transform var(--td-t-standard) var(--td-ease-out);
	width: 2px;
}

.td-dim:hover,
.td-dim:focus-visible,
.td-dim[aria-selected="true"] { padding-left: 22px; }

.td-dim:hover::before,
.td-dim:focus-visible::before,
.td-dim[aria-selected="true"]::before { transform: scaleY(1); }

.td-dim__num {
	color: var(--td-ink-4);
	flex: none;
	font-family: var(--td-font-editorial);
	font-size: 1.5rem;
	line-height: 1;
	transition: color var(--td-t-standard) var(--td-ease);
	width: 2.2ch;
}

.td-dim[aria-selected="true"] .td-dim__num { color: var(--td-accent); }

.td-dim__name {
	font-family: var(--td-font-display);
	font-size: clamp(1rem, 0.9rem + 0.5vw, 1.375rem);
	font-weight: 600;
	letter-spacing: var(--td-tracking-head);
	text-transform: uppercase;
	transition: color var(--td-t-standard) var(--td-ease);
}

.td-dim[aria-selected="true"] .td-dim__name { color: var(--td-ink); }

/* Detail panel */
.td-dimensions__panel {
	display: flex;
	flex-direction: column;
	gap: var(--td-s-5);
	min-height: 340px;
	padding: clamp(28px, 3vw, 44px);
	position: sticky;
	top: calc(var(--td-header-h) + 32px);
}

.td-dimensions__panel-num {
	color: var(--td-accent);
	font-family: var(--td-font-editorial);
	font-size: clamp(3.5rem, 2rem + 5vw, 6rem);
	line-height: 0.8;
	opacity: 0.9;
}

.td-dimensions__panel-name {
	font-size: var(--td-fs-h3);
	letter-spacing: var(--td-tracking-head);
	text-transform: uppercase;
}

.td-dimensions__panel-def { color: var(--td-ink-2); font-size: var(--td-fs-lead); }

.td-dimensions__panel-links {
	border-top: 1px solid var(--td-line);
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin-top: auto;
	padding-top: var(--td-s-5);
}

/* The panel cross-fades when the selection changes. */
.td-dimensions__panel-body {
	display: flex;
	flex-direction: column;
	gap: var(--td-s-4);
	transition: opacity var(--td-t-standard) var(--td-ease),
	            transform var(--td-t-standard) var(--td-ease-out);
}

.td-dimensions__panel.is-swapping .td-dimensions__panel-body {
	opacity: 0;
	transform: translateY(8px);
}

/* Mobile accordion variant */
.td-dimensions__accordion { display: grid; }

@media (min-width: 1024px) { .td-dimensions__accordion { display: none; } }
@media (max-width: 1023.98px) { .td-dimensions__layout { display: none; } }

.td-dim-acc { border-bottom: 1px solid var(--td-line); }

.td-dim-acc__trigger {
	align-items: center;
	display: flex;
	gap: var(--td-s-4);
	padding: 18px 0;
	text-align: left;
	width: 100%;
}

.td-dim-acc__num {
	color: var(--td-ink-4);
	flex: none;
	font-family: var(--td-font-editorial);
	font-size: 1.375rem;
	width: 2.4ch;
}

.td-dim-acc__name {
	flex: 1;
	font-family: var(--td-font-display);
	font-size: 1.0625rem;
	font-weight: 600;
	letter-spacing: var(--td-tracking-head);
	text-transform: uppercase;
}

.td-dim-acc__body { color: var(--td-ink-2); font-size: var(--td-fs-sm); padding-bottom: 20px; padding-left: calc(2.4ch + var(--td-s-4)); }

/* 05 LIFECYCLE: in components.css, shared with every lifecycle section. */

/* -----------------------------------------------------------------------------
   06 CAPABILITIES  -  TD_CapabilityGrid
   Editorial asymmetric grid - explicitly not five identical cards (spec s06).
   -------------------------------------------------------------------------- */

.td-caps__grid {
	display: grid;
	gap: var(--td-s-4);
	grid-template-columns: minmax(0, 1fr);
}

/* Every card gets a span before any of them gets a special one. The spans below
   were written for exactly five cards, so the sixth landed with no rule at all:
   one column wide and the height of the whole row. A default first means an
   extra unit is a layout choice rather than a layout bug. */
@media (min-width: 700px) {
	.td-caps__grid { grid-template-columns: repeat(6, minmax(0, 1fr)); gap: var(--td-s-5); }
	.td-cap { grid-column: span 3; }
	.td-cap:nth-child(1) { grid-column: span 6; }
}

@media (min-width: 1100px) {
	.td-caps__grid { grid-template-columns: repeat(12, minmax(0, 1fr)); }
	.td-cap { grid-column: span 4; }
	.td-cap:nth-child(1) { grid-column: span 7; grid-row: span 2; }
	.td-cap:nth-child(2) { grid-column: span 5; }
	.td-cap:nth-child(3) { grid-column: span 5; }
}

.td-cap {
	display: flex;
	flex-direction: column;
	gap: var(--td-s-4);
	min-height: 230px;
	padding: clamp(26px, 2.6vw, 40px);
	text-decoration: none;
}

.td-cap--feature { justify-content: space-between; min-height: 340px; }

.td-cap__title {
	font-family: var(--td-font-display);
	font-size: clamp(1.25rem, 1rem + 1vw, 2rem);
	font-weight: var(--td-weight-heading, 700);
	letter-spacing: var(--td-tracking-head);
	line-height: 1.12;
	text-transform: uppercase;
}

.td-cap--feature .td-cap__title { font-size: clamp(1.75rem, 1.2rem + 1.8vw, 2.75rem); }

.td-cap__copy { color: var(--td-ink-2); font-size: var(--td-fs-sm); max-width: 46ch; }

.td-cap__list {
	color: var(--td-ink-3);
	display: flex;
	flex-wrap: wrap;
	font-size: var(--td-fs-xs);
	gap: 6px 14px;
	max-height: 0;
	opacity: 0;
	overflow: hidden;
	transition: max-height var(--td-t-standard) var(--td-ease-out),
	            opacity var(--td-t-standard) var(--td-ease);
}

.td-cap:hover .td-cap__list,
.td-cap:focus-within .td-cap__list { max-height: 120px; opacity: 1; }

/* The feature cell has the room, so its list is always open. That also stops the
   card changing height on hover and reflowing the grid around it. */
.td-cap--feature .td-cap__list { max-height: none; opacity: 1; }

.td-cap__list li::after { color: var(--td-ink-4); content: " /"; }
.td-cap__list li:last-child::after { content: ""; }

/* -- Feature cell visual ---------------------------------------------------- */

/* The flexible child of the card, so it absorbs whatever height the shorter
   cards leave behind rather than leaving the hole that was there before. */
.td-cap__figure {
	align-items: flex-end;
	display: flex;
	flex: 1 1 auto;
	justify-content: center;
	margin-top: var(--td-s-2);
	min-height: clamp(118px, 13vw, 180px);
	overflow: hidden;
	width: 100%;
}

.td-growth {
	color: var(--td-ink);
	display: block;
	max-width: 440px;
	width: 100%;
}

.td-growth__grid { opacity: 0.11; }

/* Bars grow from the baseline, the line draws along them, then the nodes land -
   one measurement assembling itself, not three separate animations. */
.js-motion .td-growth__bar {
	transform: scaleY(0.03);
	transform-box: fill-box;
	transform-origin: bottom;
	transition: transform var(--td-t-signature) var(--td-ease-out);
	transition-delay: calc(var(--i, 0) * 90ms + 160ms);
}

.js-motion .td-cap.is-revealed .td-growth__bar { transform: scaleY(1); }

.js-motion .td-growth__line {
	stroke-dasharray: 1;
	stroke-dashoffset: 1;
	transition: stroke-dashoffset 1100ms var(--td-ease-out) 400ms;
}

.js-motion .td-cap.is-revealed .td-growth__line { stroke-dashoffset: 0; }

.js-motion .td-growth__node {
	opacity: 0;
	transform: scale(0.35);
	transform-box: fill-box;
	transform-origin: center;
	transition:
		opacity var(--td-t-standard) var(--td-ease),
		transform var(--td-t-standard) var(--td-ease-spring);
	transition-delay: calc(var(--i, 0) * 110ms + 640ms);
}

.js-motion .td-cap.is-revealed .td-growth__node { opacity: 1; transform: scale(1); }

/* The leading node keeps a breath of movement while the card is hovered. */
.td-growth__node:last-child { transition-property: opacity, transform, filter; }
.td-cap:hover .td-growth__node:last-child { filter: drop-shadow(0 0 10px color-mix(in srgb, var(--td-orange) 65%, transparent)); }

@media (prefers-reduced-motion: reduce) {
	.js-motion .td-growth__bar  { transform: none; transition: none; }
	.js-motion .td-growth__line { stroke-dashoffset: 0; transition: none; }
	.js-motion .td-growth__node { opacity: 1; transform: none; transition: none; }
}

.td-cap__foot {
	align-items: center;
	color: var(--td-accent);
	display: flex;
	font-size: var(--td-fs-xs);
	font-weight: 600;
	gap: 8px;
	letter-spacing: var(--td-tracking-button);
	margin-top: auto;
	padding-top: var(--td-s-4);
	text-transform: uppercase;
}

/* -----------------------------------------------------------------------------
   07 FEATURED WORK  -  TD_CaseStudyFeature / TD_CaseStudyCard
   -------------------------------------------------------------------------- */

.td-work__grid {
	display: grid;
	gap: var(--td-s-5);
	grid-template-columns: minmax(0, 1fr);
}

/* The feature runs the full width with its image beside its copy, and the two
   supporting cards sit in a row under it. The earlier arrangement - feature in
   a tall left column, two cards stacked on the right - forced the feature's
   image to absorb the height of both of them. */
@media (min-width: 1024px) {
	.td-work__side {
		display: grid;
		gap: var(--td-s-5);
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.td-case--feature { flex-direction: row; }

	/* The ratio box is dropped in favour of a height the row can settle at, so
	   the image is a photograph rather than a column of one. */
	.td-case--feature .td-media {
		--td-ratio: 0;
		flex: 0 0 52%;
		min-height: clamp(420px, 34vw, 560px);
	}

	.td-case--feature .td-case__body {
		flex: 1 1 auto;
		justify-content: center;
		padding: clamp(28px, 3vw, 48px);
	}
}

/* Two lines each, so the pair keep the same shape however long an editor's
   title runs. What differs between them is content - one carries metrics and
   one does not - and the image absorbs that. */
.td-work__side .td-case__title,
.td-work__side .td-case__copy {
	display: -webkit-box;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.td-work__side .td-case__title { -webkit-line-clamp: 2; }
.td-work__side .td-case__copy  { -webkit-line-clamp: 2; }


/* -----------------------------------------------------------------------------
   08 THREE E  -  TD_ThreeE
   -------------------------------------------------------------------------- */

/* The cards themselves are in components.css, shared with the About page. */

.td-3e__close {
	border-top: 1px solid var(--td-line);
	color: var(--td-ink);
	font-family: var(--td-font-display);
	font-size: var(--td-fs-h4);
	font-weight: 500;
	letter-spacing: var(--td-tracking-head);
	margin-top: var(--td-s-7);
	padding-top: var(--td-s-6);
	text-align: center;
}

.td-3e__close em { color: var(--td-accent); font-style: normal; }

/* -----------------------------------------------------------------------------
   09 AI AND INNOVATION  -  TD_AIInnovation  (dark tone island)
   -------------------------------------------------------------------------- */

.td-ai { overflow: hidden; position: relative; }

.td-ai__grid {
	display: grid;
	gap: clamp(36px, 4.4vw, 72px);
	grid-template-columns: minmax(0, 1fr);
	position: relative;
	z-index: 1;
}

@media (min-width: 1024px) {
	.td-ai__grid { align-items: center; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
}

.td-ai__copy { display: flex; flex-direction: column; gap: var(--td-s-5); }

.td-ai__title { font-size: var(--td-fs-h2); letter-spacing: var(--td-tracking-head); max-width: 16ch; }

/* Connected-systems diagram: nodes and workflow paths, never a humanoid robot. */
.td-ai__diagram {
	aspect-ratio: 5 / 4;
	position: relative;
	width: 100%;
}

.td-ai__paths {
	height: 100%;
	inset: 0;
	position: absolute;
	width: 100%;
}

/* A node's left/top is its CENTRE, which is also where its lines meet it. The
   box is then drawn over the join, so the line never has to stop at an edge
   whose position depends on how long the label happens to be. */
.td-ai__node {
	align-items: center;
	background: var(--td-card-bg);
	-webkit-backdrop-filter: var(--td-card-backdrop);
	backdrop-filter: var(--td-card-backdrop);
	border: var(--td-card-border);
	border-radius: var(--td-r-card);
	box-shadow: var(--td-card-shadow);
	display: flex;
	font-size: var(--td-fs-sm);
	font-weight: 600;
	gap: 10px;
	letter-spacing: var(--td-tracking-body);
	padding: 13px 18px;
	position: absolute;
	transform: translate(-50%, -50%);
	transition: border-color var(--td-t-standard) var(--td-ease),
	            box-shadow var(--td-t-standard) var(--td-ease),
	            transform var(--td-t-standard) var(--td-ease-spring);
	white-space: nowrap;
}

.td-ai__node:hover {
	border-color: var(--td-hairline-accent);
	box-shadow: var(--td-card-shadow-hover);
	transform: translate(-50%, -50%) scale(1.06);
	z-index: 2;
}

/* The hub has five lines pointing at it, so it has to be able to hold its own
   against them. */
.td-ai__node--hub {
	background: var(--td-card-bg-2);
	font-size: var(--td-fs-body);
	font-weight: var(--td-weight-heading, 700);
	padding: 16px 24px;
	z-index: 1;
}

.td-ai__node--hub::before { height: 10px; width: 10px; }

.td-ai__node::before {
	background: var(--td-grad-brand);
	border-radius: 2px;
	content: "";
	flex: none;
	height: 8px;
	transform: rotate(45deg);
	width: 8px;
}

/* Narrow screens cannot hold six absolutely-placed boxes without them landing
   on each other, so the map becomes a list. */
@media (max-width: 720px) {
	.td-ai__diagram {
		aspect-ratio: auto;
		display: grid;
		gap: var(--td-s-3);
		justify-items: start;
	}

	.td-ai__paths { display: none; }

	.td-ai__node {
		left: auto !important;
		position: relative;
		top: auto !important;
		transform: none;
	}

	.td-ai__node:hover { transform: scale(1.02); }
}

/* -----------------------------------------------------------------------------
   10 INSIGHTS  -  TD_InsightGrid
   -------------------------------------------------------------------------- */

.td-insights__grid {
	display: grid;
	gap: var(--td-s-5);
	grid-template-columns: minmax(0, 1fr);
}

@media (min-width: 640px)  { .td-insights__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1100px) { .td-insights__grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

.td-insight { display: flex; flex-direction: column; overflow: hidden; padding: 0; text-decoration: none; }

.td-insight__body {
	display: flex;
	flex: 1;
	flex-direction: column;
	gap: var(--td-s-3);
	padding: var(--td-s-5);
}

.td-insight__topic {
	color: var(--td-accent);
	font-size: 0.6875rem;
	font-weight: 600;
	letter-spacing: var(--td-tracking-eyebrow);
	text-transform: uppercase;
}

.td-insight__title {
	font-size: 1.0625rem;
	letter-spacing: var(--td-tracking-head);
	line-height: 1.3;
}

.td-insight__meta {
	color: var(--td-ink-4);
	display: flex;
	flex-wrap: wrap;
	font-size: var(--td-fs-xs);
	gap: 6px;
	margin-top: auto;
	padding-top: var(--td-s-4);
}

.td-insight__meta span + span::before { content: "\00b7"; margin-right: 6px; }

/* 04b TEN DIMENSIONS: in components.css, shared with the Ten Dimensions page. */