/*
 * Terms & Conditions (Figma 370:627), and Privacy / Cookie Policy on the same layout. No mobile frames — adapted.
 * Sections: "Legal section" 370:693 … (heading 32/40, text 18/28, dot bullets, 40px + rule, 60px between).
 */

.zain-legal-intro {
	width: calc(1268 * var(--s));
	padding: calc(120 * var(--s)) 0 calc(88 * var(--s));
}

.zain-legal-intro__title {
	color: var(--wp--preset--color--ink);
	font-size: var(--wp--preset--font-size--hero);
	line-height: var(--wp--custom--line-height--hero);
}

.zain-legal-intro__lead {
	max-width: calc(940 * var(--s));
	margin-top: 28px;
	color: var(--wp--preset--color--ink);
	font-size: var(--wp--preset--font-size--lead);
	line-height: var(--wp--custom--line-height--lead);
}

.zain-legal-intro__updated {
	margin-top: 28px;
	color: var(--wp--preset--color--slate);
	font-size: var(--wp--preset--font-size--regular);
	line-height: var(--wp--custom--line-height--regular);
}

.zain-legal {
	width: calc(1268 * var(--s));
	padding: calc(96 * var(--s)) 0 calc(104 * var(--s));
}

.zain-legal__section {
	display: flex;
	flex-direction: column;
	gap: 20px;
	padding-bottom: 39px; /* + 1px rule = Figma's 40 */
	margin-bottom: 60px;
	border-bottom: 1px solid rgb(0 0 0 / 0.15);
	color: var(--wp--custom--color--prose);
	font-size: var(--wp--preset--font-size--large);
	line-height: var(--wp--custom--line-height--large);
}

.zain-legal__section:last-child {
	margin-bottom: 0;
	padding-bottom: 0;
	border-bottom: 0;
}

/* No rule below (Terms "Contact" 370:863: the closing Crisis Support 517:1112 follows 60px under it) */
.zain-legal__section--open {
	padding-bottom: 0;
	border-bottom: 0;
}

/*
 * Callouts (Confidentiality 370:793, Crisis Support 370:809). The box is drawn behind the content with a pseudo
 * element so the section keeps its rule below. Figma's box has no left padding (text touches the edge) — 32 used.
 */
.zain-legal__section--info,
.zain-legal__section--notice {
	position: relative;
	padding-top: 32px;
	padding-inline: 32px;
}

.zain-legal__section--info::before,
.zain-legal__section--notice::before {
	content: "";
	position: absolute;
	inset: 0 0 40px;
	z-index: -1;
	border-radius: 12px;
	background: #edf3f6;
}

.zain-legal__section--notice::before {
	background: #fff1d3;
}

.zain-legal__section--info,
.zain-legal__section--notice {
	padding-bottom: 71px; /* 32 inside the box + 39 + the 1px rule */
}

.zain-legal__section h2 {
	color: var(--wp--preset--color--black);
	font-size: var(--wp--preset--font-size--heading-3);
	line-height: var(--wp--custom--line-height--heading-3);
}

.zain-legal__section ul {
	display: flex;
	flex-direction: column;
	gap: 8px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.zain-legal__section li {
	position: relative;
	padding-left: 20px;
}

.zain-legal__section li::before {
	content: "";
	position: absolute;
	top: 12px;
	left: 0;
	width: 5px;
	height: 5px;
	border-radius: 50%;
	background: var(--wp--preset--color--black);
}

.zain-legal__pair {
	padding-top: 4px;
}

.zain-legal__pair span {
	margin-right: 12px;
	color: var(--wp--preset--color--slate);
}

.zain-legal__link a {
	color: var(--wp--preset--color--black);
	text-decoration: none;
}

.zain-legal__link a[href^="mailto:"] {
	color: var(--wp--preset--color--forest);
}

.zain-legal__link a:hover {
	text-decoration: underline;
}

/* Crisis numbers (no Figma design — Habib 2026-10-22): tap to call / text, and a footnote [1] on the first Crisis
   Support that jumps to them, with ↩ back */
.zain-legal__section p a {
	color: var(--wp--preset--color--forest);
	font-weight: 600;
	text-decoration: underline;
	text-underline-offset: 3px;
}

.zain-legal__ref {
	font-size: var(--wp--preset--font-size--small);
	line-height: 0;
	vertical-align: super;
}

.zain-legal__ref a,
.zain-legal__back {
	color: var(--wp--preset--color--forest);
	text-decoration: none;
}

.zain-legal__ref a:hover,
.zain-legal__back:hover {
	text-decoration: underline;
}

.zain-legal__back {
	font-size: var(--wp--preset--font-size--regular);
	line-height: 0; /* ↩ comes from a fallback font: keep the heading's line height */
}

.zain-legal__section[id] {
	scroll-margin-top: 24px;
}

@media (max-width: 1199px) {
	.zain-legal-intro,
	.zain-legal {
		width: calc(392 * var(--s));
	}

	.zain-legal-intro {
		padding: 40px 0 48px;
	}

	.zain-legal {
		padding: 48px 0 64px;
	}

	.zain-legal__section {
		gap: 16px;
		padding-bottom: 31px;
		margin-bottom: 40px;
	}

	.zain-legal__section--info,
	.zain-legal__section--notice {
		padding-bottom: 63px; /* 32 inside the box + 31 + the 1px rule */
	}

	.zain-legal__section--info::before,
	.zain-legal__section--notice::before {
		bottom: 32px;
	}
}