/* Extreme — story: text beside a photo with a thick arc bar on its edge. Dark or light; photo left or right. */
.ex.split { padding: var(--ex-sec) 0; background: var(--ex-navy-900); color: var(--ex-text); }
.ex.split--light { background: #fff; color: var(--ex-ink-text); }
.ex.split--light .eyebrow { color: var(--ex-green-dark); }
.ex .spl-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(36px, 5vw, 88px); align-items: center; }
.ex.split--left .spl-media { order: -1; }
.ex .spl-body { margin-top: 22px; font-size: var(--ex-fs-lead); line-height: 1.6; color: var(--ex-text-dim); max-width: 56ch; }
.ex.split--light .spl-body { color: var(--ex-ink-dim); }
.ex .spl-body p + p { margin-top: 14px; }
.ex .spl-body a { color: var(--ex-green); text-decoration: underline; text-underline-offset: 3px; }
.ex.split--light .spl-body a { color: var(--ex-brand); }
.ex .spl-pts { display: grid; gap: 12px; margin: 26px 0 0; }
.ex .spl-pts li { display: flex; align-items: flex-start; gap: 12px; font-size: 17px; font-weight: 600; }
.ex .spl-pts svg { flex: none; width: 22px; height: 22px; margin-top: 2px; color: var(--ex-green); }
.ex.split--light .spl-pts svg { color: var(--ex-green-dark); }
.ex .spl-copy .btn { margin-top: 30px; }
.ex .spl-media { position: relative; margin: 0; }
.ex .spl-media img { display: block; width: 100%; height: auto; aspect-ratio: 5 / 4; object-fit: cover; border-radius: 4px; }
.ex .spl-media::after { content: ""; position: absolute; top: 12%; bottom: 12%; right: -10px; width: 10px; background: linear-gradient(180deg, #2a54a6, #55b4e8 55%, #72c33c); transform: skewY(-12deg); }
.ex.split--left .spl-media::after { right: auto; left: -10px; }
.ex .spl-media figcaption { margin-top: 12px; font-size: var(--ex-fs-small); color: var(--ex-text-dim); }
.ex.split--light .spl-media figcaption { color: var(--ex-ink-dim); }
@media (max-width: 900px) {
	.ex .spl-grid { grid-template-columns: minmax(0, 1fr); }
	.ex .spl-media, .ex.split--left .spl-media { order: -1; }
	.ex .spl-media::after { display: none; }
}
@media (max-width: 640px) {
	.ex.split { padding: 56px 0; }
	.ex .spl-body { font-size: 16.5px; }
	.ex .spl-copy .btn { width: 100%; }
}