/**
 * OSHIDA — cowork «چرا اوشیدا؟». Owner: C4.
 *
 * @figma 1691:2692 one text node, 1205.19 x 627 at (124.55, 2198.73)
 *
 * Off tools/figma/renders/cowork-1440.webp: heading ink 2224-2272,
 * inline-start aligned; para 1 ink 2333-2401, two lines on a 47px pitch,
 * justified, pure white; two bulleted points at 2471-2539 and 2607-2721,
 * marker at x≈1290 outside the measure, dimmed; close at 2793-2815, white.
 *
 * The dim is 50%, not 40%: peak ink in the points is rgb(149,149,149) on the
 * frame's rgb(40,40,40) ground = white at alpha 0.507. Over the theme's real
 * --o-bg that is 5.3:1, which passes; --o-text-muted (0.4) is 3.78:1, which
 * does not (design-tokens.md §9.10). Shipped as an opacity because no token
 * carries 0.5 — cross-request to A1 for --o-text-dim.
 */

.o-cowork-why {
	--o-cowork-col: 1200px;
	--o-cowork-why-lead: 86px; /* 2198.73 - 2113.03 */
	--o-cowork-why-gap: var(--o-space-2xl); /* 2333 - 2272, 2471 - 2401 */
	--o-cowork-why-dim: 0.507; /* measured rgb(149,149,149) on rgb(40,40,40) */
	--o-cowork-why-leading: 2.1; /* 47px pitch */

	padding-block-start: var(--o-cowork-why-lead);
}

.o-cowork-why__inner {
	max-inline-size: calc(var(--o-cowork-col) + var(--o-gutter) * 2);
}

.o-cowork-why__title {
	margin: 0;
	font-size: var(--o-fs-h1);
	font-weight: var(--o-fw-black);
	line-height: var(--o-lh-heading);
	letter-spacing: var(--o-track-snug);
	text-align: start;
}

.o-cowork-why__lede,
.o-cowork-why__point,
.o-cowork-why__close {
	font-size: var(--o-fs-lg);
	font-weight: var(--o-fw-extralight);
	line-height: var(--o-cowork-why-leading);
	letter-spacing: var(--o-track-micro);
	text-align: justify;
}

.o-cowork-why__lede {
	margin: var(--o-cowork-why-gap) 0 0;
}

.o-cowork-why__points {
	margin: var(--o-cowork-why-gap) 0 0;
	padding: 0;
	list-style: none;
}

.o-cowork-why__point {
	position: relative;
	padding-inline-start: var(--o-space-md);
	opacity: var(--o-cowork-why-dim);
}

.o-cowork-why__point + .o-cowork-why__point {
	margin-block-start: var(--o-cowork-why-gap);
}

/* Marker sampled at x 1290-1297 — outside the measure, at the inline start. */
.o-cowork-why__point::before {
	content: "";
	position: absolute;
	inset-inline-start: 0;
	inset-block-start: 0.85em;
	inline-size: 7px;
	block-size: 7px;
	border-radius: var(--o-radius-pill);
	background-color: currentColor;
}

.o-cowork-why__close {
	margin: var(--o-cowork-why-gap) 0 0;
}

/* Below `lg`: DERIVED. Justification is dropped below `sm`, where a 350px
 * measure would open rivers. docs/ai/responsive-decisions.md. */

@media (max-width: 899px) {
	.o-cowork-why {
		--o-cowork-why-lead: var(--o-space-3xl);
		--o-cowork-why-gap: var(--o-space-lg);
		--o-cowork-why-leading: var(--o-lh-body);
	}
}

@media (max-width: 599px) {
	.o-cowork-why {
		--o-cowork-why-lead: var(--o-space-xl);
		--o-cowork-why-leading: var(--o-lh-snug);
	}

	.o-cowork-why__lede,
	.o-cowork-why__point,
	.o-cowork-why__close {
		font-size: var(--o-fs-body);
		text-align: start;
	}

	.o-cowork-why__point {
		padding-inline-start: var(--o-space-xs);
	}
}