/* Extreme — how it works: slanted numbered badges joined by an arc line; vertical on phones. */
.ex.steps { padding: var(--ex-sec) 0; background: var(--ex-ink); color: var(--ex-text); overflow: hidden; }
.ex .stp-head { max-width: 720px; margin-bottom: clamp(44px, 5vw, 72px); }
.ex .stp-list { position: relative; display: grid; grid-template-columns: repeat(var(--stp-n, 4), minmax(0, 1fr)); gap: 32px; list-style: none; }
.ex .stp-list::before { content: ""; position: absolute; left: 32px; right: 32px; top: 31px; height: 3px; background: var(--ex-arc); opacity: .85; }
.ex .stp-item { position: relative; }
.ex .stp-n { position: relative; z-index: 1; display: inline-grid; place-items: center; width: 64px; height: 64px; background: var(--ex-ink); border: 2px solid var(--ex-green); color: #fff; font-size: 26px; font-weight: 880; font-stretch: 125%; font-style: italic; transform: skewX(-10deg); border-radius: 3px; }
.ex .stp-item:last-child .stp-n { background: var(--ex-green); color: var(--ex-green-ink); }
.ex .stp-item h3 { margin: 24px 0 8px; font-size: 21px; font-weight: 800; font-stretch: 112%; font-style: italic; text-transform: uppercase; line-height: 1.1; color: #fff; }
.ex .stp-item p { font-size: 15.5px; line-height: 1.55; color: var(--ex-text-dim); max-width: 30ch; }
@media (max-width: 900px) {
	.ex .stp-list { grid-template-columns: minmax(0, 1fr); gap: 28px; padding-left: 0; }
	.ex .stp-list::before { left: 31px; right: auto; top: 32px; bottom: 32px; width: 3px; height: auto; background: linear-gradient(180deg, #2a54a6, #55b4e8 55%, #72c33c); }
	.ex .stp-item { display: grid; grid-template-columns: 64px minmax(0, 1fr); column-gap: 20px; }
	.ex .stp-n { grid-row: span 2; }
	.ex .stp-item h3 { margin: 6px 0 6px; }
}
@media (max-width: 640px) {
	.ex.steps { padding: 56px 0; }
	.ex .stp-list::before { left: 25px; }
	.ex .stp-item { grid-template-columns: 52px minmax(0, 1fr); column-gap: 16px; }
	.ex .stp-n { width: 52px; height: 52px; font-size: 21px; }
	.ex .stp-item h3 { font-size: 19px; }
}