/* Page Sections — Comparison table */

.ps-cmp {
	background: #fff;
}

/* Override .section__head's default flex-row layout so eyebrow / heading /
   intro stack vertically and centre. (.section__head is `display:flex;
   justify-content:space-between` so without this its three children would
   sit on a single horizontal line.) */
.ps-cmp__head {
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	gap: 10px;
	margin-bottom: 40px;
}

.ps-cmp__eyebrow {
	display: inline-block;
	margin: 0;
}

.ps-cmp__heading {
	margin: 0;
	max-width: 22ch;
}

.ps-cmp__intro {
	margin: 0 auto;
	max-width: 60ch;
	color: var(--grey-700, #555);
	font-size: 1rem;
	line-height: 1.55;
}

/* ---------- Desktop/tablet table ---------- */

.ps-cmp__table-wrap {
	width: 100%;
	overflow: visible;
	padding-top: 12px; /* room for the highlight column's lift */
	padding-bottom: 12px;
}

.ps-cmp__table {
	width: 100%;
	border-collapse: separate;
	border-spacing: 0;
	background: var(--cream);
	border-radius: var(--radius-lg);
	overflow: visible;
	table-layout: fixed;
}

.ps-cmp__table thead th {
	background: var(--cream);
	font-family: var(--font-heading);
	font-weight: 700;
	color: var(--teal);
	font-size: clamp(1.05rem, 1.6vw, 1.3rem);
	padding: 22px 18px;
	text-align: center;
	vertical-align: middle;
	letter-spacing: 0;
	border-bottom: 1px solid var(--grey-200);
}

.ps-cmp__th--feature {
	background: transparent;
	border-bottom: none;
}

/* The table's own corners are rounded, but header-cell backgrounds paint
   square — round the outer header cells so no cream corner pokes out. */
.ps-cmp__table thead th:first-child { border-top-left-radius: var(--radius-lg); }
.ps-cmp__table thead th:last-child  { border-top-right-radius: var(--radius-lg); }

.ps-cmp__th--highlight {
	background: var(--teal);
	color: var(--cream);
	position: relative;
	border-top-left-radius: var(--radius-lg);
	border-top-right-radius: var(--radius-lg);
	border-bottom: none;
}

.ps-cmp__row-label {
	font-family: var(--font-heading);
	font-weight: 500;
	color: var(--teal);
	text-align: left;
	padding: 22px 24px;
	vertical-align: middle;
	font-size: clamp(1rem, 1.2vw, 1.15rem);
	line-height: 1.3;
	background: var(--sand);
	border-bottom: 1px solid rgba(255, 255, 255, .55);
	width: 38%;
}

/* The whole label column sits on a sand band — visually anchors the table and
   gives the feature names equal weight against the comparison columns. */
.ps-cmp__row--even .ps-cmp__row-label {
	background: var(--sand);
}
.ps-cmp__th--feature {
	width: 38%;
}

.ps-cmp__cell {
	padding: 18px 18px;
	text-align: center;
	vertical-align: middle;
	border-bottom: 1px solid var(--grey-200);
	background: transparent;
}

.ps-cmp__row--even .ps-cmp__row-label,
.ps-cmp__row--even .ps-cmp__cell {
	background: var(--grey-100);
}

/* Highlighted column reads as a flat pale-teal band beneath the teal header —
   no shadow, no scale lift. */
.ps-cmp__cell--highlight {
	background: rgba(24, 60, 66, 0.08);
	position: relative;
}

.ps-cmp__row--even .ps-cmp__cell--highlight {
	background: rgba(24, 60, 66, 0.12);
}

/* Round bottom corners on the last row, including the highlighted column. */
.ps-cmp__table tbody tr:last-child .ps-cmp__row-label {
	border-bottom: none;
	border-bottom-left-radius: var(--radius-lg);
}

.ps-cmp__table tbody tr:last-child .ps-cmp__cell {
	border-bottom: none;
}

.ps-cmp__table tbody tr:last-child .ps-cmp__cell:last-child {
	border-bottom-right-radius: var(--radius-lg);
}

.ps-cmp__table tbody tr:last-child .ps-cmp__cell--highlight {
	border-bottom-left-radius: var(--radius-lg);
	border-bottom-right-radius: var(--radius-lg);
}

/* Thick teal frame right around the highlighted (Bottle 'n Barrel) column:
   left/right on every cell, top on the header, bottom on the last cell.
   (border-collapse is `separate`, so these read as one continuous outline.) */
.ps-cmp__th--highlight,
.ps-cmp__cell--highlight {
	border-left: 3px solid var(--teal);
	border-right: 3px solid var(--teal);
}
.ps-cmp__th--highlight {
	border-top: 3px solid var(--teal);
}
.ps-cmp__table tbody tr:last-child .ps-cmp__cell--highlight {
	border-bottom: 3px solid var(--teal);
}

/* ---------- Cell value icons ---------- */

.ps-cmp__icon {
	display: inline-flex;
	width: 24px;
	height: 24px;
	border-radius: 50%;
	align-items: center;
	justify-content: center;
}

.ps-cmp__icon-svg {
	width: 16px;
	height: 16px;
	display: block;
}

.ps-cmp__icon--yes {
	background: var(--green);
	color: #fff;
}

.ps-cmp__icon--no {
	background: transparent;
	color: var(--red);
}

.ps-cmp__icon--no .ps-cmp__icon-svg {
	width: 24px;
	height: 24px;
}

.ps-cmp__icon--partial {
	background: var(--sand);
	color: var(--plum);
}

.ps-cmp__value--text {
	font-family: var(--font);
	color: var(--grey-700, #555);
	font-size: 0.95rem;
	line-height: 1.3;
}

.ps-cmp__caption {
	display: block;
	margin-top: 4px;
	font-size: 0.8rem;
	color: var(--grey-700, #555);
	font-family: var(--font);
	line-height: 1.3;
}

.ps-cmp__cell--highlight .ps-cmp__caption,
.ps-cmp__cell--highlight .ps-cmp__value--text {
	color: var(--teal);
}

/* ---------- Mobile stacked card layout ---------- */

.ps-cmp__stack {
	display: none;
	grid-template-columns: 1fr;
	gap: 18px;
}

.ps-cmp__stack-card {
	background: var(--cream);
	border-radius: var(--radius-lg);
	box-shadow: var(--shadow-card);
	padding: 22px 20px;
}

.ps-cmp__stack-card--highlight {
	background: var(--teal);
	color: var(--cream);
}

.ps-cmp__stack-title {
	margin: 0 0 14px;
	font-family: var(--font-heading);
	color: var(--teal);
	font-size: 1.3rem;
	line-height: 1.2;
}

.ps-cmp__stack-card--highlight .ps-cmp__stack-title {
	color: var(--cream);
}

.ps-cmp__stack-list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
}

.ps-cmp__stack-item {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 14px;
	padding: 12px 0;
	border-bottom: 1px solid rgba(0, 0, 0, 0.08);
}

.ps-cmp__stack-card--highlight .ps-cmp__stack-item {
	border-bottom-color: rgba(244, 240, 234, 0.18);
}

.ps-cmp__stack-item:last-child {
	border-bottom: none;
}

.ps-cmp__stack-label {
	font-family: var(--font);
	font-size: 0.95rem;
	color: var(--teal);
	font-weight: 600;
	flex: 1 1 auto;
}

.ps-cmp__stack-card--highlight .ps-cmp__stack-label {
	color: var(--cream);
}

.ps-cmp__stack-value {
	display: inline-flex;
	flex-direction: column;
	align-items: flex-end;
	gap: 2px;
	flex: 0 0 auto;
	max-width: 50%;
	text-align: right;
}

.ps-cmp__stack-value .ps-cmp__caption {
	text-align: right;
}

.ps-cmp__stack-card--highlight .ps-cmp__caption,
.ps-cmp__stack-card--highlight .ps-cmp__value--text {
	color: var(--cream);
}

/* Red "no" cross is near-invisible on the teal card — use cream there. */
.ps-cmp__stack-card--highlight .ps-cmp__icon--no {
	color: var(--cream);
}

/* ---------- Responsive switch ---------- */

@media (max-width: 767px) {
	.ps-cmp__table-wrap {
		display: none;
	}

	.ps-cmp__stack {
		display: grid;
	}
}

/* On narrower desktops, tighten the table a touch. */
@media (max-width: 1023px) and (min-width: 768px) {
	.ps-cmp__table thead th,
	.ps-cmp__row-label,
	.ps-cmp__cell {
		padding: 14px 12px;
	}

	.ps-cmp__row-label { width: 34%; font-size: 0.98rem; }
	.ps-cmp__th--feature { width: 34%; }
}

/* Desktop — pad more, balance column widths, lift the highlight column. */
@media (min-width: 1024px) {
	.ps-cmp__head { margin-bottom: 40px; gap: 12px; }

	.ps-cmp__table thead th {
		padding: 22px 18px;
		font-size: clamp(1.05rem, 1.3vw, 1.2rem);
	}
	.ps-cmp__row-label {
		padding: 20px 22px;
		font-size: clamp(1rem, 1.05vw, 1.08rem);
		width: 32%;
	}
	.ps-cmp__th--feature { width: 32%; }

	.ps-cmp__cell { padding: 18px 18px; }

	.ps-cmp__value--text { font-size: 0.98rem; }
	.ps-cmp__caption     { font-size: 0.82rem; margin-top: 5px; }

	.ps-cmp__icon { width: 26px; height: 26px; }
	.ps-cmp__icon-svg { width: 17px; height: 17px; }
	.ps-cmp__icon--no .ps-cmp__icon-svg { width: 26px; height: 26px; }
}

/* Wide desktop — extra generous padding so the table breathes. */
@media (min-width: 1280px) {
	.ps-cmp__table thead th { padding: 24px 20px; }
	.ps-cmp__row-label { padding: 22px 24px; }
	.ps-cmp__cell { padding: 20px 20px; }
}