/* ==========================================================================
   Branxify – Comparison Table
   ========================================================================== */

.bxct,
.bxct *,
.bxct *::before,
.bxct *::after {
	box-sizing: border-box;
}

.bxct {
	--bxct-c1: minmax(0, 1fr);
	--bxct-c2: minmax(0, 1fr);
	--bxct-c3: minmax(0, 1fr);
	--bxct-line: #e3eaf1;
	--bxct-accent: #ff6a1a;
	--bxct-accent-w: 2px;

	position: relative;
	width: 100%;
	overflow: hidden;
	background: #fff;
	border: 1px solid #dbe4ee;
	border-radius: 28px;
	box-shadow: 0 12px 40px rgba(15, 23, 42, 0.08);
	font-family: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
	-webkit-font-smoothing: antialiased;
}

/* ---------- Rows / grid ---------- */
.bxct__row {
	display: grid;
	grid-template-columns: var(--bxct-c1) var(--bxct-c2) var(--bxct-c3);
}

.bxct__row:not(:last-child) {
	border-bottom: 1px solid var(--bxct-line);
}

.bxct__cell {
	min-width: 0;
	display: flex;
	flex-direction: column;
	justify-content: center;
}

.bxct__cell--legacy {
	border-left: 1px solid var(--bxct-line);
}

.bxct__cell--std {
	border-left: var(--bxct-accent-w) solid var(--bxct-accent);
}

/* ---------- Header ---------- */
.bxct__row--head .bxct__cell {
	padding: 34px 24px;
}

.bxct__row--head .bxct__cell--pillar { background: #f7f9fc; }
.bxct__row--head .bxct__cell--legacy { background: #f1f6fa; }
.bxct__row--head .bxct__cell--std    { background: linear-gradient(90deg, #fff, #fff3e8); }

.bxct__pillar-label {
	font-family: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
	font-size: 12px;
	font-weight: 700;
	line-height: 1.4;
	letter-spacing: 1.5px;
	text-transform: uppercase;
	color: #5b6b82;
}

.bxct__eyebrow {
	margin-bottom: 8px;
	font-size: 12px;
	font-weight: 600;
	line-height: 1.4;
	letter-spacing: 1.5px;
	text-transform: uppercase;
	color: #5b6b82;
}

.bxct__htitle {
	font-size: 22px;
	font-weight: 700;
	line-height: 1.4;
	letter-spacing: -0.3px;
	color: #0f172a;
}

.bxct__badge-wrap {
	margin-bottom: 12px;
	line-height: 0;
}

.bxct__badge {
	display: inline-block;
	padding: 5px 10px;
	border-radius: 6px;
	background: #ff5a1f;
	color: #fff;
	font-size: 11px;
	font-weight: 700;
	line-height: 1.2;
	letter-spacing: 0.4px;
	text-transform: uppercase;
}

/* ---------- Body ---------- */
.bxct__row--body .bxct__cell {
	padding: 28px 24px;
	background: #fff;
}

.bxct__row--body .bxct__cell--std {
	background: #fdfaf7;
}

.bxct__pillar {
	font-size: 15px;
	font-weight: 600;
	line-height: 1.4;
	color: #0f172a;
}

.bxct__inner {
	display: flex;
	align-items: flex-start;
	gap: 14px;
}

.bxct__text {
	min-width: 0;
	flex: 1 1 auto;
}

.bxct__media {
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	margin-top: 1px;
	line-height: 1;
}

.bxct__media--icon i {
	font-size: 18px;
	line-height: 1;
}

.bxct__media--icon svg {
	width: 18px;
	height: 18px;
}

.bxct__media--image img {
	display: block;
	width: 24px;
	height: 24px;
	max-width: none;
	object-fit: contain;
	border-radius: 4px;
}

.bxct__title {
	font-size: 16px;
	font-weight: 600;
	line-height: 1.4;
	color: #111827;
}

.bxct__desc {
	margin-top: 6px;
	font-size: 14px;
	font-weight: 400;
	line-height: 1.5;
	color: #64748b;
}

/* ---------- Rich text reset (WYSIWYG output) ---------- */
.bxct .bxct__rt p {
	margin: 0 0 0.5em;
	font: inherit;
	color: inherit;
	letter-spacing: inherit;
	text-transform: inherit;
}

.bxct .bxct__rt p:last-child {
	margin-bottom: 0;
}

.bxct .bxct__rt a {
	color: inherit;
	text-decoration: underline;
	text-underline-offset: 2px;
}

.bxct .bxct__rt ul,
.bxct .bxct__rt ol {
	margin: 0.4em 0;
	padding-left: 1.2em;
}

/* ---------- Whole-title links ---------- */
.bxct a.bxct__link,
.bxct a.bxct__link:hover,
.bxct a.bxct__link:focus {
	display: block;
	color: inherit;
	text-decoration: none;
}

.bxct a.bxct__link:focus-visible {
	outline: 2px solid var(--bxct-accent);
	outline-offset: 3px;
	border-radius: 4px;
}

/* ---------- Scroll wrapper ---------- */
.bxct__scroll {
	width: 100%;
}

.bxct__table {
	width: 100%;
}

/* ---------- Horizontal scroll mode (3 columns stay together) ---------- */
@media (max-width: 767px) {
	.bxct-mode-scroll-mobile .bxct__scroll,
	.bxct-mode-scroll-tablet .bxct__scroll {
		overflow-x: scroll;
		overflow-y: hidden;
		-webkit-overflow-scrolling: touch;
		overscroll-behavior-x: contain;
		scrollbar-width: thin;
		scrollbar-color: #c3cfdc transparent;
	}
	.bxct-mode-scroll-mobile .bxct__table,
	.bxct-mode-scroll-tablet .bxct__table {
		min-width: var(--bxct-min, 760px);
	}
	.bxct-mode-scroll-mobile .bxct__scroll::-webkit-scrollbar,
	.bxct-mode-scroll-tablet .bxct__scroll::-webkit-scrollbar {
		height: 6px;
	}
	.bxct-mode-scroll-mobile .bxct__scroll::-webkit-scrollbar-thumb,
	.bxct-mode-scroll-tablet .bxct__scroll::-webkit-scrollbar-thumb {
		background: #c3cfdc;
		border-radius: 6px;
	}
}

@media (min-width: 768px) and (max-width: 1024px) {
	.bxct-mode-scroll-tablet .bxct__scroll {
		overflow-x: scroll;
		overflow-y: hidden;
		-webkit-overflow-scrolling: touch;
		scrollbar-width: thin;
		scrollbar-color: #c3cfdc transparent;
	}
	.bxct-mode-scroll-tablet .bxct__table {
		min-width: var(--bxct-min, 760px);
	}
	.bxct-mode-scroll-tablet .bxct__scroll::-webkit-scrollbar {
		height: 6px;
	}
	.bxct-mode-scroll-tablet .bxct__scroll::-webkit-scrollbar-thumb {
		background: #c3cfdc;
		border-radius: 6px;
	}
}

/* ---------- Stack mode ---------- */
@media (max-width: 1024px) {
	.bxct-mode-stack-tablet .bxct__row {
		grid-template-columns: minmax(0, 1fr);
	}
	.bxct-mode-stack-tablet .bxct__row--head {
		display: none;
	}
	.bxct-mode-stack-tablet .bxct__row--body .bxct__cell--pillar {
		padding-bottom: 8px;
		background: #f7f9fc;
	}
	.bxct-mode-stack-tablet .bxct__cell--legacy {
		border-left-width: 0;
		border-top: 1px solid var(--bxct-line);
	}
	.bxct-mode-stack-tablet .bxct__cell--std {
		border-top: 1px solid var(--bxct-line);
	}
	.bxct-mode-stack-tablet .bxct__cell[data-label]:not([data-label=""])::before {
		content: attr(data-label);
		display: block;
		margin-bottom: 10px;
		font-size: 11px;
		font-weight: 700;
		letter-spacing: 1.2px;
		text-transform: uppercase;
		color: #8492a6;
	}
}

@media (max-width: 767px) {
	.bxct-mode-stack-mobile .bxct__row {
		grid-template-columns: minmax(0, 1fr);
	}
	.bxct-mode-stack-mobile .bxct__row--head {
		display: none;
	}
	.bxct-mode-stack-mobile .bxct__row--body .bxct__cell--pillar {
		padding-bottom: 8px;
		background: #f7f9fc;
	}
	.bxct-mode-stack-mobile .bxct__cell--legacy {
		border-left-width: 0;
		border-top: 1px solid var(--bxct-line);
	}
	.bxct-mode-stack-mobile .bxct__cell--std {
		border-top: 1px solid var(--bxct-line);
	}
	.bxct-mode-stack-mobile .bxct__cell[data-label]:not([data-label=""])::before {
		content: attr(data-label);
		display: block;
		margin-bottom: 10px;
		font-size: 11px;
		font-weight: 700;
		letter-spacing: 1.2px;
		text-transform: uppercase;
		color: #8492a6;
	}
}