/*
 * The Perfect "Yes" Guarantee — per-feature stylesheet.
 *
 * Nelio A/B variant (client-side): the block is HIDDEN BY DEFAULT and only shown
 * when Nelio adds `body.da-guarantee-on` for the variant cohort (Control = no block). Uses the brand CSS vars from main.css :root.
 */

.da-guarantee {
	display: none;
}

body.da-guarantee-on .da-guarantee {
	display: block;
}

/* PDP swap: revealing the block also hides the old "Our Commitment" slider. */
body.da-guarantee-on .da-pdp-commitment {
	display: none;
}

.da-guarantee {
	box-sizing: border-box;
	width: 100%;
	padding: 56px 20px;
}

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

/* PDP carries a full-bleed cream panel; homepage has no panel. */
.da-guarantee--pdp {
	background-color: var(--pearl);
	padding-top: 64px;
	padding-bottom: 72px;
}

.da-guarantee--home {
	background-color: transparent;
}

.da-guarantee__inner {
	max-width: 1180px;
	margin: 0 auto;
}

/* ── Header ───────────────────────────────────────────────────────────── */
.da-guarantee__head {
	text-align: center;
	margin-bottom: 48px;
}

.da-guarantee__title {
	font-family: Canela, serif;
	font-weight: 300;
	color: var(--onyx);
	font-size: 56px;
	line-height: 1.05;
	letter-spacing: 0.01em;
	margin: 0 0 12px;
}

.da-guarantee__subtitle {
	font-family: English1766, Canela, serif;
	font-style: italic;
	color: var(--onyx-light);
	font-size: 26px;
	line-height: 1.2;
	margin: 0;
}

/* ── Grid: 2 columns on desktop (items 1-3 left, 4-6 right) ───────────── */
.da-guarantee__grid {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	/* Column-major fill: items 1-3 in the LEFT column, 4-6 in the RIGHT
	   (matches the Figma). 3 explicit rows + grid-auto-flow:column. */
	grid-template-columns: repeat(2, minmax(0, 1fr));
	grid-template-rows: repeat(3, auto);
	grid-auto-flow: column;
	column-gap: 72px;
	row-gap: 28px;
}

.da-guarantee__item {
	display: flex;
	align-items: flex-start;
	gap: 16px;
}

.da-guarantee__check {
	flex: 0 0 auto;
	width: 22px;
	height: 22px;
	margin-top: 4px;
}

.da-guarantee__item-heading {
	font-family: FoundersGrotesk, sans-serif;
	font-weight: 600;
	text-transform: none;
	color: var(--onyx);
	font-size: 21px;
	line-height: 1.25;
	margin: 0 0 4px;
}

.da-guarantee__item-body {
	font-family: FoundersGrotesk, sans-serif;
	color: var(--onyx-light);
	font-size: 18px;
	line-height: 1.25;
	margin: 0;
}

/* ── Footer fine-print ────────────────────────────────────────────────── */
.da-guarantee__fineprint {
	text-align: center;
	font-family: FoundersGrotesk, sans-serif;
	color: var(--onyx-light);
	font-size: 13px;
	line-height: 1.4;
	margin: 40px auto 0;
}

.da-guarantee__fineprint a {
	color: var(--onyx-light);
	text-decoration: underline;
}

/* ── PDP CTA ──────────────────────────────────────────────────────────── */
.da-guarantee__cta-wrap {
	text-align: center;
	margin-top: 30px;
}

.da-guarantee__cta {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 12px;
	min-width: 420px;
	max-width: 100%;
	padding: 20px 32px;
	background-color: var(--jade);
	color: var(--pearl);
	font-family: FoundersGrotesk, sans-serif;
	font-size: 16px;
	letter-spacing: 0.08em;
	text-decoration: none;
	border-radius: 4px;
	transition: opacity 0.2s ease;
}

.da-guarantee__cta:hover {
	color: var(--pearl);
	opacity: 0.9;
}

.da-guarantee__cta-arrow {
	display: inline-block;
}

/* ── Mobile: single stacked column, items 1→6 in order ───────────────── */
@media (max-width: 991px) {
	.da-guarantee {
		padding: 40px 24px;
	}

	.da-guarantee--pdp {
		padding-top: 44px;
		padding-bottom: 52px;
	}

	.da-guarantee__head {
		margin-bottom: 32px;
	}

	.da-guarantee__title {
		font-size: 34px;
	}

	.da-guarantee__subtitle {
		font-size: 20px;
	}

	.da-guarantee__grid {
		grid-template-columns: minmax(0, 1fr);
		/* Stack 1->6 in source order: revert to row flow. */
		grid-template-rows: none;
		grid-auto-flow: row;
		column-gap: 0;
		row-gap: 28px;
	}

	.da-guarantee__item-heading {
		font-size: 18px;
	}

	.da-guarantee__item-body {
		font-size: 16px;
	}

	.da-guarantee__fineprint {
		margin-top: 32px;
	}

	.da-guarantee__cta {
		min-width: 0;
		width: 100%;
		max-width: 360px;
		padding: 18px 24px;
	}
}

/* Scroll-in reveal (fade + slide up). Active only once JS adds .da-anim, so the
   block stays visible if JS is unavailable or reduced-motion is set. */
.da-guarantee.da-anim .da-guarantee__inner {
	opacity: 0;
	transform: translateY(24px);
	transition: opacity 0.6s ease, transform 0.6s ease;
}

.da-guarantee.da-anim.is-visible .da-guarantee__inner {
	opacity: 1;
	transform: none;
}