/* ---------------- Hero (split layout, different from loadboard/packets) ---------------- */
	.tm-hero {
		background: linear-gradient(135deg, #1a1d22 0%, #2a2f37 100%);
		color: #f1f3f5;
		padding: 70px 0 50px;
		position: relative; overflow: hidden;
	}
	.tm-hero::before {
		content: ""; position: absolute; inset: 0;
		background-image:
			radial-gradient(circle at 18% 22%, rgba(255,159,28,.12) 0%, transparent 38%),
			radial-gradient(circle at 82% 78%, rgba(220,53,69,.10)  0%, transparent 42%);
		pointer-events: none;
	}
	.tm-hero > .container { position: relative; z-index: 1; }
	.tm-hero .eyebrow {
		display: inline-block;
		font-size: .78rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase;
		color: #ffc169; background: rgba(255,159,28,.12); border: 1px solid rgba(255,159,28,.3);
		padding: .35rem .9rem; border-radius: 999px; margin-bottom: 1.1rem;
	}
	.tm-hero h1 {
		font-size: clamp(2rem, 4.5vw, 3.4rem);
		font-weight: 800; letter-spacing: -.025em; line-height: 1.05;
		margin: 0 0 1rem; color: #fff;
	}
	.tm-hero .lead { font-size: 1.15rem; color: rgba(255,255,255,.82); max-width: 580px; line-height: 1.55; }
	.tm-hero-stats { margin-top: 2rem; display: flex; gap: 2.4rem; flex-wrap: wrap; }
	.tm-hero-stats .item .num { font-size: 2rem; font-weight: 800; color: #ff9f1c; line-height: 1; letter-spacing: -.02em; }
	.tm-hero-stats .item .lbl { font-size: .8rem; text-transform: uppercase; letter-spacing: .08em; color: rgba(255,255,255,.55); margin-top: .25rem; }

	.tm-hero-card {
		background: rgba(255,255,255,.04);
		border: 1px solid rgba(255,255,255,.10);
		border-radius: 14px; padding: 1.6rem;
		backdrop-filter: blur(8px);
	}
	.tm-hero-card .label { font-size: .72rem; text-transform: uppercase; letter-spacing: .12em; color: #ffc169; margin-bottom: .5rem; font-weight: 700; }
	.tm-hero-card h3 { color: #fff; font-size: 1.5rem; font-weight: 800; margin: 0 0 .5rem; }
	.tm-hero-card p { color: rgba(255,255,255,.75); font-size: .95rem; margin-bottom: 1rem; }
	.tm-hero-card .stars { color: #ff9f1c; font-size: 1.4rem; letter-spacing: .12em; }
	.tm-hero-card .stars .empty { color: rgba(255,255,255,.18); }

	/* ---------------- Brand tiles ---------------- */
	.tm-tile {
		flex-shrink: 0; width: 56px; height: 56px; border-radius: 12px;
		display: flex; align-items: center; justify-content: center;
		font-weight: 800; color: #fff; font-size: .92rem; letter-spacing: -.01em;
		box-shadow: 0 4px 10px rgba(0,0,0,.06);
		font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
	}
	.tm-tile-sm { width: 38px; height: 38px; border-radius: 8px; font-size: .68rem; box-shadow: 0 2px 6px rgba(0,0,0,.05); }
	.tm-tile-xl { width: 90px; height: 90px; border-radius: 18px; font-size: 1.5rem; box-shadow: 0 8px 22px rgba(0,0,0,.15); }

	.tile-ninja      { background: linear-gradient(135deg, #1a1d22 0%, #000 60%); position: relative; }
	.tile-ninja::after {
		content: ""; position: absolute; inset: 0; border-radius: inherit;
		background: linear-gradient(135deg, transparent 60%, rgba(255,159,28,.6) 100%);
		pointer-events: none;
	}
	.tile-mcleod     { background: linear-gradient(135deg, #003a70 0%, #001f3d 100%); }
	.tile-tpro       { background: linear-gradient(135deg, #1f78d1 0%, #0d4e8d 100%); }
	.tile-trimble    { background: linear-gradient(135deg, #00558b 0%, #003557 100%); }
	.tile-tstop      { background: linear-gradient(135deg, #e8332a 0%, #b3211a 100%); }
	.tile-its        { background: linear-gradient(135deg, #c0392b 0%, #7d2218 100%); }
	.tile-protrans   { background: linear-gradient(135deg, #2ecc71 0%, #1e8e4a 100%); }
	.tile-loadops    { background: linear-gradient(135deg, #00bfa5 0%, #00897b 100%); }
	.tile-q7         { background: linear-gradient(135deg, #6366f1 0%, #4338ca 100%); }
	.tile-strategy   { background: linear-gradient(135deg, #d4a017 0%, #8a6608 100%); }
	.tile-ascend     { background: linear-gradient(135deg, #1a3a6c 0%, #0d2042 100%); }
	.tile-aljex      { background: linear-gradient(135deg, #ff7a1a 0%, #d8590a 100%); }
	.tile-tai        { background: linear-gradient(135deg, #14b8a6 0%, #0f766e 100%); }
	.tile-turvo      { background: linear-gradient(135deg, #6b4f9e 0%, #44326b 100%); }
	.tile-pt         { background: linear-gradient(135deg, #00558b 0%, #003557 100%); }

	/* ---------------- COMPARISON TABLE (the differentiator) ---------------- */
	.tm-table-wrap { background: #f8f9fa; padding: 70px 0; border-top: 1px solid #e9ecef; border-bottom: 1px solid #e9ecef; }
	.tm-table-head { text-align: center; margin-bottom: 2.5rem; }
	.tm-table-head h2 { font-weight: 800; letter-spacing: -.015em; color: #1a1d22; }
	.tm-table-head .sub { color: #6c757d; max-width: 700px; margin: 0 auto; }
	.tm-table {
		background: #fff;
		border-radius: 14px;
		overflow: hidden;
		box-shadow: 0 8px 24px rgba(0,0,0,.06);
		border: 1px solid #e9ecef;
	}
	.tm-table table { width: 100%; margin: 0; border-collapse: collapse; }
	.tm-table thead th {
		background: #1a1d22;
		color: #f1f3f5;
		font-size: .76rem; font-weight: 700;
		text-transform: uppercase; letter-spacing: .1em;
		padding: 1rem 1.2rem;
		text-align: left;
		border: 0;
	}
	.tm-table thead th.center { text-align: center; }
	.tm-table tbody td {
		padding: 1rem 1.2rem;
		border-top: 1px solid #f1f3f5;
		font-size: .94rem;
		color: #495057;
		vertical-align: middle;
	}
	.tm-table tbody td.center { text-align: center; }
	.tm-table tbody tr:hover { background: #fafbfc; }
	.tm-table tbody tr.winner { background: linear-gradient(90deg, rgba(255,159,28,.08) 0%, rgba(255,159,28,.02) 100%); }
	.tm-table tbody tr.winner td { font-weight: 600; color: #1a1d22; }
	.tm-table .name-cell { display: flex; align-items: center; gap: .8rem; }
	.tm-table .name-cell .name { font-weight: 700; color: #1a1d22; line-height: 1.15; }
	.tm-table .name-cell .pick {
		display: inline-block;
		font-size: .65rem; font-weight: 800; letter-spacing: .08em;
		background: linear-gradient(135deg, #ff9f1c 0%, #d97706 100%);
		color: #fff;
		padding: .15rem .5rem;
		border-radius: 4px;
		margin-left: .35rem;
		text-transform: uppercase;
		vertical-align: middle;
	}
	.tm-stars { color: #ff9f1c; font-size: 1rem; letter-spacing: .05em; white-space: nowrap; }
	.tm-stars .empty { color: #dee2e6; }
	.tm-stars .num { color: #6c757d; font-size: .8rem; font-weight: 600; margin-left: .35rem; vertical-align: middle; }
	.tm-table-mini-link { color: #0d6efd; font-weight: 600; text-decoration: none; font-size: .88rem; }
	.tm-table-mini-link:hover { text-decoration: underline; }

	@media (max-width: 992px) {
		/* Force horizontal scroll on the table wrapper. The desktop rule sets
		   `overflow: hidden` for the rounded corners, which we override here
		   for both axes so the inner table can scroll on touch screens. */
		.tm-table {
			overflow-x: auto !important;
			-webkit-overflow-scrolling: touch;
			border-radius: 0;
		}
		.tm-table table { min-width: 720px; }
	}
	@media (max-width: 575.98px) {
		.tm-table thead th, .tm-table tbody td { padding: .7rem .85rem; font-size: .82rem; }
		.tm-table .name-cell .name { font-size: .9rem; }
	}

	/* ---------------- Methodology callout ---------------- */
	.tm-methodology {
		background: #fff;
		border: 1px dashed #ced4da;
		border-radius: 12px;
		padding: 1.3rem 1.6rem;
		margin-top: 2rem;
		font-size: .9rem; color: #495057;
		display: flex; align-items: flex-start; gap: 1rem;
	}
	.tm-methodology .icon {
		flex-shrink: 0;
		width: 40px; height: 40px;
		border-radius: 8px;
		background: #1a1d22;
		color: #ff9f1c;
		display: flex; align-items: center; justify-content: center;
		font-weight: 800;
	}
	.tm-methodology strong { color: #1a1d22; display: block; margin-bottom: .25rem; }

	/* ---------------- WINNER spotlight ---------------- */
	.tm-winner {
		background: linear-gradient(135deg, #1a1d22 0%, #2a2f37 60%, #1a1d22 100%);
		color: #f1f3f5;
		border-radius: 20px;
		padding: 2.4rem;
		position: relative;
		overflow: hidden;
		border: 1px solid rgba(255,159,28,.25);
		box-shadow: 0 30px 60px rgba(0,0,0,.18);
		margin: 70px 0 0;
	}
	.tm-winner::before {
		content: ""; position: absolute; inset: 0;
		background-image:
			radial-gradient(circle at 12% 20%, rgba(255,159,28,.20) 0%, transparent 38%),
			radial-gradient(circle at 88% 78%, rgba(220,53,69,.10) 0%, transparent 42%);
		pointer-events: none;
	}
	.tm-winner > * { position: relative; z-index: 1; }
	.tm-winner-pick {
		display: inline-flex; align-items: center; gap: .5rem;
		background: linear-gradient(135deg, #ff9f1c 0%, #d97706 100%);
		color: #1a1d22;
		padding: .4rem 1rem;
		border-radius: 999px;
		font-size: .78rem; font-weight: 800;
		letter-spacing: .14em; text-transform: uppercase;
		margin-bottom: 1.2rem;
		box-shadow: 0 4px 14px rgba(255,159,28,.35);
	}
	.tm-winner h2 { font-size: clamp(2rem, 4vw, 2.8rem); font-weight: 900; letter-spacing: -.02em; line-height: 1.05; margin: 0; color: #fff; }
	.tm-winner .meta { font-size: .92rem; opacity: .65; margin-top: .25rem; }
	.tm-winner .lead { font-size: 1.15rem; opacity: .92; margin-top: 1.2rem; line-height: 1.55; }
	.tm-winner .stars { color: #ff9f1c; font-size: 1.5rem; letter-spacing: .1em; margin-top: .8rem; }

	/* ---------------- Detail cards ---------------- */
	.tm-detail {
		background: #fff;
		border: 1px solid #e9ecef;
		border-radius: 12px;
		padding: 1.5rem;
		height: 100%;
	}
	.tm-detail .head { display: flex; align-items: center; gap: 1rem; margin-bottom: 1rem; }
	.tm-detail .head h3 { font-size: 1.2rem; font-weight: 800; margin: 0; line-height: 1.1; }
	.tm-detail .head .meta { font-size: .8rem; color: #868e96; margin-top: .15rem; }
	.tm-detail .stars { color: #ff9f1c; font-size: 1rem; letter-spacing: .05em; margin-top: .35rem; }
	.tm-detail .stars .empty { color: #dee2e6; }
	.tm-detail p { color: #495057; font-size: .92rem; line-height: 1.55; margin: 0 0 .8rem; }
	.tm-detail .bullets { padding-left: 1rem; color: #495057; font-size: .88rem; margin-bottom: 1rem; }
	.tm-detail .bullets li { margin-bottom: .25rem; }
	.tm-detail .visit-btn {
		display: inline-block; font-size: .85rem; font-weight: 600;
		color: #1a1d22; background: #f1f3f5;
		padding: .4rem .9rem; border-radius: 6px;
		text-decoration: none;
		transition: background .15s ease;
	}
	.tm-detail .visit-btn:hover { background: #1a1d22; color: #fff; }

	/* ---------------- "What a TMS does" – horizontal layout ---------------- */
	.tm-jobs { padding: 70px 0; }
	.tm-job { display: flex; gap: 1.2rem; align-items: flex-start; padding: 1.2rem 0; }
	.tm-job .icon {
		flex-shrink: 0; width: 56px; height: 56px;
		border-radius: 12px;
		background: linear-gradient(135deg, #ff9f1c 0%, #d97706 100%);
		color: #fff; font-size: 1.4rem; font-weight: 800;
		display: flex; align-items: center; justify-content: center;
		box-shadow: 0 6px 14px rgba(255,159,28,.25);
	}
	.tm-job h4 { font-size: 1.05rem; font-weight: 700; margin-bottom: .35rem; color: #1a1d22; }
	.tm-job p { font-size: .92rem; color: #6c757d; margin: 0; line-height: 1.5; }

	/* ---------------- NinjaTMS final CTA (different from loadboard's CTA) ---------------- */
	.tm-cta-strip {
		background:
			radial-gradient(circle at 18% 18%, rgba(255,159,28,.18) 0%, transparent 38%),
			radial-gradient(circle at 82% 82%, rgba(220,53,69,.12) 0%, transparent 40%),
			linear-gradient(135deg, #08090b 0%, #16191e 50%, #1f242b 100%);
		color: #f1f3f5;
		padding: 80px 0 90px;
		position: relative; overflow: hidden;
		border-top: 4px solid #ff9f1c;
	}
	.tm-cta-strip::after {
		content: ""; position: absolute; inset: 0;
		background-image: linear-gradient(rgba(255,255,255,.025) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.025) 1px, transparent 1px);
		background-size: 32px 32px; pointer-events: none;
	}
	.tm-cta-strip > .container { position: relative; z-index: 1; }
	.tm-cta-strip .pre { font-size: .82rem; text-transform: uppercase; letter-spacing: .14em; color: #ff9f1c; font-weight: 700; margin-bottom: .8rem; }
	.tm-cta-strip h2 {
		font-size: clamp(2rem, 5vw, 3.4rem); font-weight: 900; letter-spacing: -.025em; line-height: 1;
		margin-bottom: 1rem;
		background: linear-gradient(180deg, #ffffff 0%, #c0c8d0 100%);
		-webkit-background-clip: text; background-clip: text; color: transparent;
	}
	.tm-cta-strip .lead { font-size: 1.25rem; opacity: .9; max-width: 720px; margin-bottom: 1.5rem; }
	.tm-cta-strip .body { opacity: .82; max-width: 720px; line-height: 1.65; font-size: 1rem; }
	.tm-cta-bullets {
		display: grid; grid-template-columns: repeat(2, 1fr); gap: .5rem 1.6rem;
		margin: 1.6rem 0 .5rem; max-width: 760px;
		list-style: none; padding: 0;
	}
	.tm-cta-bullets li { display: flex; align-items: flex-start; gap: .55rem; padding: .35rem 0; font-size: .98rem; opacity: .92; }
	.tm-cta-bullets li::before {
		content: "→"; color: #ff9f1c; font-weight: 800; flex-shrink: 0;
	}
	.tm-cta-strip .cta-btn {
		display: inline-block;
		background: linear-gradient(135deg, #ff9f1c 0%, #d97706 100%);
		color: #1a1d22;
		padding: 1.05rem 2.6rem;
		font-size: 1.15rem; font-weight: 800;
		border-radius: 10px; text-decoration: none;
		margin-top: 1.5rem;
		box-shadow: 0 8px 20px rgba(255,159,28,.30);
		transition: transform .15s ease, box-shadow .15s ease;
	}
	.tm-cta-strip .cta-btn:hover { color: #1a1d22; transform: translateY(-2px); box-shadow: 0 14px 30px rgba(255,159,28,.42); }
	.tm-cta-strip .meta { font-size: .9rem; opacity: .65; margin-top: 1rem; }
	@media (max-width: 768px) { .tm-cta-bullets { grid-template-columns: 1fr; } }

	/* CTA right-column award medallion */
	.tm-cta-medallion {
		position: relative;
		width: 100%; max-width: 360px;
		aspect-ratio: 1 / 1;
		margin: 0 auto;
		display: flex; align-items: center; justify-content: center;
	}
	.tm-cta-medallion .ring {
		position: absolute; inset: 0;
		border-radius: 50%;
		background:
			conic-gradient(from 220deg, #ff9f1c 0deg, #ffcf6b 60deg, #ff9f1c 120deg, #d97706 200deg, #ff9f1c 360deg);
		padding: 6px;
		box-shadow:
			0 0 0 1px rgba(255,159,28,.4),
			0 24px 60px rgba(255,159,28,.25),
			inset 0 0 80px rgba(255,159,28,.1);
		animation: tm-ring-spin 30s linear infinite;
	}
	.tm-cta-medallion .ring::before {
		content: "";
		position: absolute; inset: 6px;
		border-radius: 50%;
		background: radial-gradient(circle at 50% 35%, #1f242b 0%, #0a0c10 100%);
	}
	.tm-cta-medallion .inner {
		position: relative; z-index: 1;
		width: 78%; height: 78%;
		border-radius: 50%;
		background: radial-gradient(circle at 50% 35%, #1f242b 0%, #0a0c10 100%);
		border: 2px solid rgba(255,159,28,.4);
		display: flex; flex-direction: column; align-items: center; justify-content: center;
		text-align: center; padding: 1rem;
		box-shadow: inset 0 4px 14px rgba(0,0,0,.5);
	}
	.tm-cta-medallion .star-glyph {
		font-size: 3.6rem; line-height: 1;
		color: #ff9f1c;
		filter: drop-shadow(0 4px 14px rgba(255,159,28,.55));
		margin-bottom: .35rem;
	}
	.tm-cta-medallion .score {
		font-size: 2.4rem; font-weight: 900;
		color: #fff; letter-spacing: -.03em; line-height: 1;
		font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
	}
	.tm-cta-medallion .score sup { font-size: .9rem; font-weight: 600; opacity: .55; vertical-align: super; margin-left: .15rem; }
	.tm-cta-medallion .stars-row { color: #ff9f1c; font-size: .82rem; letter-spacing: .12em; margin: .5rem 0 .25rem; }
	.tm-cta-medallion .label-top {
		position: absolute;
		top: .9rem; left: 50%; transform: translateX(-50%);
		font-size: .58rem; font-weight: 800; letter-spacing: .22em; text-transform: uppercase;
		color: #ff9f1c; opacity: .9;
	}
	.tm-cta-medallion .label-bottom {
		position: absolute;
		bottom: .9rem; left: 50%; transform: translateX(-50%);
		font-size: .58rem; font-weight: 800; letter-spacing: .22em; text-transform: uppercase;
		color: #ff9f1c; opacity: .9;
	}
	.tm-cta-medallion .pick-band {
		font-size: .68rem; font-weight: 800; letter-spacing: .14em; text-transform: uppercase;
		color: #ffcf6b;
		margin-top: .35rem;
	}
	.tm-cta-medallion .ribbon {
		position: absolute; bottom: -14px; left: 50%; transform: translateX(-50%);
		background: linear-gradient(135deg, #ff9f1c 0%, #d97706 100%);
		color: #1a1d22;
		font-size: .72rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase;
		padding: .5rem 1.4rem;
		border-radius: 6px;
		white-space: nowrap;
		box-shadow: 0 8px 18px rgba(255,159,28,.35);
		z-index: 2;
	}
	@keyframes tm-ring-spin { to { transform: rotate(360deg); } }
	@media (max-width: 991px) {
		.tm-cta-medallion { margin-top: 3rem; max-width: 280px; }
	}