/* Extreme — what your site needs: ticked checklist left, sticky photo card right, dark ink. */
.ex.needs { padding: var(--ex-sec) 0; background: var(--ex-ink); color: var(--ex-text); }
.ex .nd-grid { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); gap: clamp(36px, 5vw, 88px); align-items: start; }
.ex .nd-main .lead { margin-top: 20px; }
.ex .nd-list { margin-top: clamp(28px, 3vw, 44px); display: grid; gap: 0; }
.ex .nd-list li { display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: 18px; padding: 22px 0; border-top: 1px solid var(--ex-line); }
.ex .nd-list li:last-child { border-bottom: 1px solid var(--ex-line); }
.ex .nd-tick { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; background: rgba(124, 204, 69, .12); color: var(--ex-green); }
.ex .nd-tick svg { width: 22px; height: 22px; stroke-width: 2.6; }
.ex .nd-list b { display: block; font-size: 19px; font-weight: 700; color: #fff; margin-bottom: 4px; }
.ex .nd-list p { font-size: 15.5px; color: var(--ex-text-dim); }

.ex .nd-side { position: sticky; top: calc(var(--ex-hdr) + 24px); }
.ex .nd-card { overflow: hidden; border-radius: 4px; background: var(--ex-navy-800); border: 1px solid var(--ex-line); clip-path: polygon(0 0, calc(100% - var(--ex-cut)) 0, 100% var(--ex-cut), 100% 100%, 0 100%); }
.ex .nd-img { aspect-ratio: 4 / 3.2; overflow: hidden; }
.ex .nd-img img { width: 100%; height: 100%; object-fit: cover; }
.ex .nd-cbody { padding: 26px 28px 30px; }
.ex .nd-note { position: relative; padding-left: 20px; font-size: 18px; line-height: 1.5; font-weight: 500; color: #fff; }
.ex .nd-note::before { content: ""; position: absolute; left: 0; top: 4px; bottom: 4px; width: 4px; background: var(--ex-arc); transform: skewX(-8deg); }
.ex .nd-stat { display: flex; align-items: center; gap: 16px; margin-top: 24px; padding-top: 22px; border-top: 1px solid var(--ex-line); }
.ex .nd-stat b { flex: none; white-space: nowrap; font-size: 46px; line-height: 1; font-weight: 900; font-stretch: 125%; font-style: italic; color: var(--ex-green); }
.ex .nd-stat span { font-size: 14px; font-weight: 600; line-height: 1.4; color: var(--ex-text-dim); max-width: 22ch; }

@media (max-width: 900px) {
	.ex .nd-grid { grid-template-columns: minmax(0, 1fr); }
	.ex .nd-side { position: static; }
}
@media (max-width: 640px) {
	.ex .nd-list li { grid-template-columns: 36px minmax(0, 1fr); gap: 14px; padding: 18px 0; }
	.ex .nd-tick { width: 36px; height: 36px; }
	.ex .nd-cbody { padding: 22px 18px 24px; }
	.ex .nd-stat b { font-size: 34px; }
}