/* ── Compare Table block ── */

.ctable-block {
	padding: 80px 0 20px 0;
}

.ctable-block__header {
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	gap: var(--space-m);
	max-width: 680px;
	margin-inline: auto;
	margin-bottom: 70px;
}

/* ── Wrap ── */
.ctable-block .section-desc p {
	max-width: 588px;
}

.ctable-wrap {
	position: relative;
}

/* ── Mobile nav (hidden on desktop) ── */

.ctable-nav {
	display: none;
}

/* ── Outer wrapper — card border + corner clip ── */

.ctable-outer {
	border-radius: 16px;
	border: 1px solid var(--color-gray-100);
	overflow: hidden;
	/* clips table corners against the radius */
}

.ctable-scroll {
	padding: 16px;
	border-radius: 14px;
	border: 1px solid var(--gray-100, #E0DEDB);
	background-image: radial-gradient(circle,
			rgba(25, 25, 25, 0.10) 0.75px,
			transparent 0.75px);
	background-size: 6px 5px;

}

/* ── Scroll container (inside outer) ── */

.ctable-scroll {
	overflow-x: auto;
	/* overscroll-behavior-x: contain; */
	-webkit-overflow-scrolling: touch;

	user-select: none;
}

.ctable-scroll.is-dragging {
	cursor: grabbing;
}

/* ── Table ── */

.ctable {
	width: 100%;
	border-collapse: separate;
	border-spacing: 0;
	min-width: 560px;
	table-layout: fixed;
	border-radius: 6px;
	border: 1px solid var(--gray-100, #E0DEDB);
}

/* Рівна ширина всіх колонок */
.ctable__th {
	width: auto;
}

/* ── Header cells ── */

.ctable__th {
	padding: clamp(16px, 2vw, 24px) clamp(16px, 2.2vw, 28px);
	text-align: left;
	font-family: var(--font-base);
	font-size: var(--fs-body-s);
	font-weight: var(--fw-semibold);
	color: var(--color-black);
	background-color: var(--color-off-white-100);
	border-bottom: 1px solid var(--color-gray-100);
	border-right: 1px solid var(--color-gray-100);
	vertical-align: middle;
	color: var(--black, #191919);
	font-size: 26px;
	font-style: normal;
	font-weight: 500;
	line-height: 124%;
	/* 32.24px */
	letter-spacing: -0.39px;
	padding: 40px 24px;
}

.ctable__th:last-child {
	border-right: none;
}

/* Accent header: same blue as cells, no extra bar */
.ctable__th.is-accent {
	background-color: var(--color-sky-200, #B2CBE5);
	border-right-color: rgba(0, 0, 0, 0.06);
}

/* ── Logo in header ── */

.ctable__logo {
	display: block;
	max-height: 20px;
	width: auto;
	object-fit: contain;
}

/* ── Rows ── */

.ctable__row:not(:last-child) .ctable__td {
	border-bottom: 1px solid var(--color-gray-100);
}

.ctable__td {
	padding: 14px 24px;
	font-family: var(--font-base);
	font-size: 22px;
	font-style: normal;
	font-weight: 500;
	line-height: 130%;
	letter-spacing: -0.33px;
	color: var(--black, #191919);
	background-color: var(--color-white);
	vertical-align: middle;
	border-right: 1px solid var(--color-gray-100);
	height: 100px;
	box-sizing: border-box;
	opacity: 0.8;
}

.ctable__td:last-child {
	border-right: none;
}

/* First column — row labels */
.ctable__td[data-col="0"] {
	font-weight: var(--fw-medium);
	color: var(--color-black);
}
.ctable__head-row .ctable__th:first-child{
border-radius: 6px 0 0 0;
}
.ctable__head-row .ctable__th:last-child{
border-radius: 0 6px 0  0;
}
.ctable tbody .ctable__row:last-child .ctable__td:first-child{
border-radius: 0 0 0 6px;
}
.ctable tbody .ctable__row:last-child .ctable__td:last-child{
border-radius: 0 0 6px 0;
}

/* Accent column cells — same blue as header */
.ctable__td.is-accent {
	background-color: var(--color-sky-200, #B2CBE5);
	color: var(--color-black);
	border-right-color: rgba(0, 0, 0, 0.06);
	border-bottom-color: rgba(0, 0, 0, 0.06);
	background-color: var(--sky-200, #D9E9FA);
	opacity: 0.8;
}

.ctable__row:not(:last-child) .ctable__td.is-accent {
	border-bottom-color: rgba(0, 0, 0, 0.06);
}

/* ── Cell icons ── */

.ctable__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
}

.ctable__icon--dash {
	color: var(--color-gray-300);
}

/* ── CTA banner ── */

.ctable-cta {
	position: relative;
	overflow: hidden;
	display: flex;
	align-items: center;
	gap: clamp(24px, 4vw, 56px);
	border: 8px solid var(--color-sky-200, #B2CBE5);

	padding: 50px 32px;
	border-radius: 14px;
	background: #FFF;
	margin-bottom: 80px;
}

.ctable-cta__text {
	flex: 1;
	position: relative;
	z-index: 2;
}

.ctable-cta__text p {
	margin: 0;
	color: #1A1919;
	max-width: 509px;
	font-size: 32px;
	font-style: normal;
	font-weight: 500;
	line-height: 110%;
	/* 35.2px */
	letter-spacing: -0.48px;
}

.ctable-cta__text p+p {
	margin-top: 0;
}

.ctable-cta__action {
	flex-shrink: 0;
	position: relative;
	z-index: 2;
}


.ctable-cta .line_pattern {
	position: absolute;
	right: 0;
	top: 0;
	height: 100%;
	width: auto;
	z-index: 1;
	pointer-events: none;
}

.ctable-cta .line_pattern img {
	height: 100%;
	width: auto;
	display: block;
}

@keyframes line-pattern-breathe {

	0%,
	100% {
		transform: scale(1);
		opacity: 1;
	}

	50% {
		transform: scale(1.04);
		opacity: 0.75;
	}
}

/* ── Responsive ── */

@media (max-width: 767px) {

	/* Nav: inside ctable-outer, sticks to left of scroll viewport so it's always centered */
	.ctable-nav {
		position: sticky;
		left: 0;
		width: 100vw;
		display: flex;
		align-items: center;
		justify-content: center;
		gap: var(--space-m);
		padding: 14px 16px;
		background: var(--white, #FFF);
		border-top: 1px solid var(--color-gray-100);
		z-index: 5;
	}

	.ctable-nav__btn {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		flex-shrink: 0;
		width: 40px;
		height: 40px;
		border: 0px solid #fff !important;
		cursor: pointer;
		color: var(--color-black);
		transition: opacity 0.2s;
	}

	.ctable-nav__btn:disabled {
		opacity: 0.3;
		cursor: not-allowed;
	}

	.ctable-nav__count {
		font-family: var(--font-base);
		font-size: var(--fs-body-s);
		color: var(--color-gray-400);
	}

	/* ctable-wrap is the scroll container on mobile */
	.ctable-wrap {
		overflow-x: auto;
		width: 100%;
		max-width: 100%;
	}
	.ctable-wrap::-webkit-scrollbar {
		display: none;
	}
	.ctable-wrap.is-dragging {
		cursor: grabbing;
	}

	/* ctable-outer takes content width so the whole card scrolls.
	   overflow: visible needed so position: sticky on ctable-nav works. */
	.ctable-outer {
		width: max-content;
		border-radius: 14px 14px 0 0;
		overflow: visible;
	}

	/* ctable-scroll: no internal scroll, no extra frame (outer handles it) */
	.ctable-scroll {
		overflow: visible;
		cursor: default;
		padding: 0;
		background-image: none;
		border: none;
		border-radius: 0;
	}

	/* Table: fixed layout — JS sets column pixel widths */
	.ctable {
		min-width: unset;
		table-layout: fixed;
	}

	.ctable-cta {
		flex-direction: column;
		align-items: flex-start;
	}

	.ctable-cta .line_pattern img {
		content: url('/wp-content/themes/goodface-pure/dist/img/Line-pattern_sky_mob.svg');
	}

	.ctable-block {
		padding: 60px 0;
		overflow-x: clip;
	}

	.ctable__th {
		padding: 24px 16px;
		font-size: 24px;
		font-style: normal;
		font-weight: 500;
		line-height: 130%;
		/* 31.2px */
		letter-spacing: -0.12px;
	}

	.ctable__logo {
		max-height: 17px;
	}

	.ctable__td {
		font-size: 18px;
		font-style: normal;
		font-weight: 500;
		line-height: 140%;
		padding: 13px 16px;
		height: 80px;
	}

	.ctable-nav__btn {
		border-radius: 50%;
		border: 1px solid var(--color-gray-100);
		background-color: var(--white, #FFF);
	}
	.ctable-nav__current{
		color: #191919;
		opacity: 0.6;
	}
	.ctable-block .container{
		padding-right: 0px;
		padding-left: 0px;
	}
	.ctable-block__header{
		        padding-inline: 20px;
	}
	.cont_mob{
		padding-inline: 20px;
	}
	.ctable{
		border: 0px solid #fff;
	}
	.ctable-outer{
		padding: 8px;
		background-image: radial-gradient(circle, rgba(25, 25, 25, 0.10) 0.75px, transparent 0.75px);
		background-size: 6px 5px;
	}
	.ctable-cta__text p{
		font-size: 24px;
font-style: normal;
font-weight: 500;
line-height: 130%; /* 31.2px */
letter-spacing: -0.12px;
	}
	.ctable-cta{
		gap: 60px;
	}
	.ctable-cta{
		padding: 24px 20px;
		overflow: hidden;
	}
	.ctable-cta .line_pattern{
		bottom: 0;
		top: auto;
		height: auto;
    width: 100%;
	}
	.ctable-cta .line_pattern img {
    height: auto;
    width: 100%;
    display: block;
}
.ctable-nav__current{
	color: #191919;
	opacity: 0.6;
}
.ctable-scroll{
	border: 1px solid rgba(25, 25, 25, 0.04);
	border-radius: 7px;
	overflow: hidden;
	/* padding-bottom: 70px; */
}
.ctable-nav{
	    position: relative;
    top: -1px;
	border-radius: 0 0 7px 7px;
	width: 100%;
}
.ctable-wrap {


}
.ctable-outer{
    margin-left: 20px;
	border-radius: 14px;
}
.ctable tbody .ctable__row:last-child .ctable__td:first-child {
    border-radius: 0 0 0 0;
}
.ctable tbody .ctable__row:last-child .ctable__td:last-child {
    border-radius: 0 0 0 0;
}
.ctable-scroll{
	border-radius: 7px 7px 0 0;
}
.ctable-nav{
	height: 60px;
	border: 1px solid var(--color-gray-100);
}
.ctable-nav.main_nav{
border: 0px solid #fff;
        height: 54px;
        z-index: 2;
        left: 0;
        bottom: 0;
        transform: translateX(32px) translateY(-67px);
        width: calc(100% - 34px);
}
.mob_inner,
.ctable-block .container{
	position: relative;
}
.ctable-cta{
	margin-bottom: 60px;
}
}