/* ═════════════════════════════════════════════════════════════════
   SECTION 6 — COMPETITIVE REALITY
   Callout block + checklist of differentiators.
   ═════════════════════════════════════════════════════════════════ */

.comp { background: var(--cream); position: relative; overflow: hidden; }
.comp::after {
	content: '';
	position: absolute;
	right: -8vw; top: 30%;
	width: clamp(360px, 46vw, 720px);
	height: clamp(360px, 46vw, 720px);
	/* background: url(../../../img/object.png) center/contain no-repeat; */
	opacity: .10;
	pointer-events: none;
	z-index: 0;
	-webkit-mask-image: radial-gradient(ellipse 68% 68% at 60% 45%, black 22%, transparent 65%);
	mask-image:         radial-gradient(ellipse 68% 68% at 60% 45%, black 22%, transparent 65%);
}

.comp-head { max-width: 1280px; margin-bottom: clamp(32px, 4vw, 72px); position: relative; z-index: 1; }
.comp-head .display .comp-orange { color: var(--orange); }

.comp-head .display {
    display: flex;
    flex-direction: column;
}
.comp-head .it-tail {
	padding-top: 0;
}

.comp-head .hl-line {
    display: block;
}

/* Prevent line breaks inside each line */
.comp-head .hl-line {
    white-space: nowrap;
}

/* Allow wrapping on mobile if needed */
@media (max-width: 768px) {
    .comp-head .hl-line {
        white-space: normal;
    }
}

/* ── Pull-quote callout ── */
.comp-callout {
	display: flex; gap: 20px;

	border: 1px solid #0B6623;
	border-radius: 16px;
	padding: clamp(24px, 2.5vw, 40px);
	margin-bottom: clamp(48px, 5vw, 80px);
}
.comp-callout-icon {
	flex-shrink: 0;
	align-self: flex-start;
	display: inline-flex;
	align-items: center;
	align-self: center;
	justify-content: center;
	padding-top: .05em;
}
.comp-callout-icon img {
	display: block;
	height: clamp(56px, 5.5vw, 80px);
	width: auto;
}
.comp-callout p { font-size: var(--fs-body); color: var(--ink); margin: 0; line-height: 1.6; }
.comp-callout p strong { color: black; font-weight: 700; }

/* ── Differentiator checklist ── */
.comp-list-col {
	display: flex;
	padding: 32px;
	flex-direction: column;
	align-items: flex-start;
	gap: 24px;
	align-self: stretch;

	border-radius: 24px;
	background: rgba(245, 243, 239, 0.60);
	backdrop-filter: blur(10px);
}

.comp-list-header { font-size: clamp(20px, 2.9167vw, 42px); font-weight: 600; color: var(--orange); line-height: 1.15; letter-spacing: -.01em; }
.comp-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; }
.comp-list li {
	font-size: var(--fs-body);
	color: var(--ink);
	padding: .875rem 0;
	display: flex; gap: .875rem; align-items: flex-start;
}
.comp-list li::before {
	content: '';
	/* SVG check mark from /assets/icons/check.svg — kept as a background
	   image so the icon colour/stroke in the source file is preserved
	   verbatim (no recolouring via `color`). */
	background: url(../../../icons/check.svg) center/contain no-repeat;
	flex-shrink: 0;
	width: 1.1em;
	height: 1.1em;
	margin-top: .2em;
}