/* ===== Caratline — Terms & Conditions page ===== */
main {
	margin-top: 40px;
}
.terms {
	background: radial-gradient(
			1100px 600px at 10% -12%,
			#ffffff 0 60%,
			transparent 60%
		),
		linear-gradient(180deg, #ffffff 0%, var(--bg-soft) 100%);
	border-top: 1px solid var(--line);
	padding: clamp(28px, 5vw, 56px) 0 28px;
}

.terms-title {
	max-width: var(--maxw);
	margin: 0 auto 10px;
	padding: 0 20px;
	font-family: 'Playfair Display', serif;
	font-weight: 600;
	font-size: clamp(24px, 3.6vw, 42px);
	line-height: 1.15;
	letter-spacing: 0.2px;
}

.terms-intro .lead {
	max-width: var(--maxw);
	margin: 0 auto 16px;
	padding: 0 20px;
	color: var(--muted);
	line-height: 1.65;
}

/* Content blocks */
.terms-block {
	max-width: var(--maxw);
	margin: 0 auto 16px;
	padding: 0 20px;
}

.terms-block h2 {
	font-family: 'Playfair Display', serif;
	font-weight: 600;
	font-size: clamp(18px, 2.6vw, 26px);
	margin: 0 0 6px;
}

.terms-block p {
	margin: 0 0 10px;
	color: var(--muted);
	line-height: 1.7;
}

/* Mandatory section gets a gentle banded background */
.terms-block.required {
	padding: 12px 20px;
	border-top: 1px solid var(--line);
	border-bottom: 1px solid var(--line);
	background: linear-gradient(#fff, #fff) padding-box,
		repeating-linear-gradient(90deg, #f4efe8 0 8px, #f8f3ec 8px 16px);
	border-radius: 0;
}
.terms-block.required p {
	background: #fff;
	border: 1px solid var(--line);
	border-radius: var(--radius);
	box-shadow: var(--shadow);
	padding: 12px;
}

/* Last updated stamp */
.terms-updated {
	max-width: var(--maxw);
	margin: 0 auto;
	padding: 0 20px;
	color: var(--muted);
	font-variant-numeric: tabular-nums;
}

/* Links & focus states */
.terms a {
	color: var(--ink);
	text-decoration: underline;
	text-underline-offset: 2px;
}
.terms a:hover {
	text-decoration-thickness: 2px;
}
.terms a:focus-visible {
	outline: 3px solid var(--brand-200);
	outline-offset: 3px;
	border-radius: 6px;
}

/* Safeguard (no images expected here, but cap just in case) */
.terms img {
	max-width: 350px;
	height: auto;
	display: block;
}

/* Small screens */
@media (max-width: 520px) {
	.terms {
		padding-top: 22px;
	}
	.terms-block.required {
		padding-inline: 16px;
	}
}
