/* Layout primitives. One container, one section rhythm, one stack scale, one
   12-column grid. Sections never carry their own widths or paddings. */
/* Container: --ew-width-wide plus the shared gutter. Header, hero, sections and
   footer all use it, so every left edge lands on the logo's left edge. */
.ew-container {
	width: 100%;
	max-width: calc(var(--ew-width-wide) + 2 * var(--ew-gutter));
	margin-inline: auto;
	padding-inline: var(--ew-gutter);
}
/* Narrow reading column, still aligned to the left container edge. */
/* Section: padding-block only, never margins between sections. */
.ew-section {
	padding-block: var(--ew-section);
	background: var(--ew-color-bg);
	color: var(--ew-color-text-primary);
}
.ew-section--compact {
	padding-block: var(--ew-section-compact);
}
/* Two consecutive sections with the same scheme: the second drops to the
   compact top padding so the shared surface does not carry double air. */
:where(.ew-section[data-scheme="light"]) + .ew-section[data-scheme="light"],
:where(.ew-section[data-scheme="dark"]) + .ew-section[data-scheme="dark"] {
	padding-top: var(--ew-section-compact);
}
/* Joined sections (story + stats, trust bar + highlights) read as one block. */
.ew-section:has(+ .ew-section[data-join="previous"]) {
	padding-bottom: var(--ew-section-compact);
}
.ew-section[data-join="previous"] {
	padding-top: 0;
}
.ew-section[id] {
	scroll-margin-top: calc(var(--ew-header-h) + var(--ew-space-4));
}
/* Stack: vertical rhythm through gap; children keep no outer margins. */
.ew-stack {
	display: flex;
	flex-direction: column;
	gap: var(--ew-stack-gap, var(--ew-space-3));
}
.ew-stack > * {
	margin-block: 0;
}
.ew-stack--4 {
	--ew-stack-gap: var(--ew-space-4);
}
.ew-stack--5 {
	--ew-stack-gap: var(--ew-space-5);
}
.ew-stack--6 {
	--ew-stack-gap: var(--ew-space-6);
}
/* Grid: twelve columns with the shared gap. Splits place the first two
   children; column modifiers size every child. */
.ew-grid {
	display: grid;
	grid-template-columns: repeat(12, minmax(0, 1fr));
	gap: var(--ew-gap);
	align-items: start;
}
.ew-grid--center {
	align-items: center;
}
.ew-grid--end {
	align-items: end;
}
.ew-grid--tight {
	gap: var(--ew-gap-tight);
}
.ew-grid > * {
	min-width: 0;
	grid-column: 1 / -1;
}
/* Phones: everything stacks, except grids that keep two columns. Twelve
   columns stay in place for the spans, but the column gaps collapse so
   eleven gaps never outgrow a narrow container. */
.ew-grid--phone-2 > * {
	grid-column: span 6;
}
@media (max-width: 47.99rem) {
	.ew-grid {
		column-gap: 0;
	}

	.ew-grid--phone-2 {
		column-gap: var(--ew-gap-tight);
	}
}
/* Tablet (from 768px): splits become 6/6, four columns become 2x2. */
@media (min-width: 48rem) {
	.ew-split--6-5 > :first-child,
	.ew-split--7-4 > :first-child,
	.ew-split--5-6 > :first-child,
	.ew-split--6-6 > :first-child {
		grid-column: 1 / 7;
	}

	.ew-split--6-5 > :nth-child(2),
	.ew-split--7-4 > :nth-child(2),
	.ew-split--5-6 > :nth-child(2),
	.ew-split--6-6 > :nth-child(2) {
		grid-column: 7 / 13;
	}

	.ew-grid--4-cols > *,
	.ew-grid--2-cols > *,
	.ew-grid--3-cols > * {
		grid-column: span 6;
	}
}
/* Desktop (from 1024px): the deliberate splits with an empty column. */
@media (min-width: 64rem) {
	.ew-split--6-5 > :first-child {
		grid-column: 1 / 7;
	}

	.ew-split--6-5 > :nth-child(2) {
		grid-column: 8 / 13;
	}

	.ew-split--7-4 > :first-child {
		grid-column: 1 / 8;
	}

	.ew-split--7-4 > :nth-child(2) {
		grid-column: 9 / 13;
	}

	.ew-split--5-6 > :first-child {
		grid-column: 1 / 6;
	}

	.ew-split--5-6 > :nth-child(2) {
		grid-column: 7 / 13;
	}

	.ew-split--6-6 > :first-child {
		grid-column: 1 / 7;
	}

	.ew-split--6-6 > :nth-child(2) {
		grid-column: 7 / 13;
	}

	.ew-grid--4-cols > * {
		grid-column: span 3;
	}

	.ew-grid--3-cols > * {
		grid-column: span 4;
	}

	.ew-grid--2-cols > * {
		grid-column: span 6;
	}
}
/* Actions: a row of buttons and text links. */
.ew-actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--ew-space-3);
}