/* Extreme cleaning: hazard edge, numbered steps, before / after slider. */
.ex.extreme { padding: var(--ex-sec) 0; background: var(--ex-ink); color: var(--ex-text); }
.ex.extreme::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 4px; background: repeating-linear-gradient(-45deg, var(--ex-amber) 0 14px, var(--ex-ink) 14px 28px); opacity: .9; }
.ex.extreme .x-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); gap: clamp(36px, 5vw, 80px); align-items: center; }
.ex.extreme .lead { margin-top: 20px; }

.ex.extreme .x-steps { counter-reset: x; display: grid; gap: 2px; margin: 32px 0 36px; }
.ex.extreme .x-steps li { counter-increment: x; display: grid; grid-template-columns: 52px 1fr; column-gap: 16px; padding: 16px 0; border-top: 1px solid var(--ex-line); }
.ex.extreme .x-steps li::before { content: "0" counter(x); grid-row: span 2; font-size: 22px; font-weight: 850; font-stretch: 120%; font-style: italic; line-height: 1.2; color: var(--ex-amber); }
.ex.extreme .x-steps li:nth-child(n+10)::before { content: counter(x); }
.ex.extreme .x-steps b { font-size: 18px; font-weight: 700; }
.ex.extreme .x-steps span { font-size: 15px; color: var(--ex-text-dim); }
.ex.extreme .x-acts { display: flex; flex-wrap: wrap; gap: 14px; }

.ex.extreme .ba-stage { --x: 50%; position: relative; aspect-ratio: 16 / 10; border-radius: 4px; overflow: hidden; background: var(--ex-navy-900); clip-path: polygon(var(--ex-cut) 0, 100% 0, 100% 100%, 0 100%, 0 var(--ex-cut)); user-select: none; -webkit-user-select: none; touch-action: pan-y; }
.ex.extreme .ba-stage img { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; object-fit: cover; }
.ex.extreme .ba-after-wrap { position: absolute; inset: 0; clip-path: inset(0 0 0 var(--x)); }
.ex.extreme .ba-line { position: absolute; top: 0; bottom: 0; left: var(--x); width: 3px; margin-left: -1.5px; background: #fff; box-shadow: 0 0 18px rgba(255, 255, 255, .6); pointer-events: none; }
.ex.extreme .ba-knob { position: absolute; top: 50%; left: 50%; display: grid; place-items: center; width: 52px; height: 52px; margin: -26px 0 0 -26px; border-radius: 50%; background: #fff; color: var(--ex-ink); box-shadow: 0 6px 20px rgba(0, 0, 0, .35); }
.ex.extreme .ba-knob svg { width: 20px; height: 20px; }
.ex.extreme .ba-range { position: absolute; inset: 0; z-index: 2; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: ew-resize; -webkit-appearance: none; appearance: none; }
.ex.extreme .ba-stage:has(.ba-range:focus-visible) .ba-knob { outline: 3px solid var(--ex-green); outline-offset: 3px; }
.ex.extreme .ba-tag { position: absolute; top: 18px; padding: 6px 12px; border-radius: 3px; font-size: 12px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; pointer-events: none; }
.ex.extreme .ba-tag-b { left: 34px; background: rgba(7, 15, 34, .8); color: #fff; }
.ex.extreme .ba-tag-a { right: 18px; background: var(--ex-green); color: var(--ex-green-ink); }
.ex.extreme .ba figcaption { margin-top: 14px; font-size: var(--ex-fs-small); color: var(--ex-text-dim); }

@media (max-width: 900px) {
	.ex.extreme .x-grid { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 640px) {
	.ex.extreme .x-acts .btn { flex: 1 1 100%; }
	.ex.extreme .ba-tag-b { left: 26px; }
}