/* Why Extreme: photo with the slanted 24/7 badge beside the reasons. */
.ex.why { padding: var(--ex-sec) 0; background: var(--ex-ink); color: var(--ex-text); }
.ex.why .why-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: clamp(36px, 5vw, 80px); align-items: center; }
.ex.why .why-grid.is-text { grid-template-columns: minmax(0, 1fr); }
.ex.why .why-img { position: relative; }
.ex.why .why-img img { width: 100%; height: auto; aspect-ratio: 4 / 4.2; object-fit: cover; object-position: 50% 70%; border-radius: 4px; clip-path: polygon(0 0, 100% 0, 100% calc(100% - var(--ex-cut)), calc(100% - var(--ex-cut)) 100%, 0 100%); }
.ex.why .why-badge { position: absolute; left: -1px; bottom: 36px; display: flex; gap: 16px; align-items: center; padding: 18px 24px; background: var(--ex-green); color: var(--ex-green-ink); transform: skewX(-10deg); transform-origin: left; }
.ex.why .why-badge > * { transform: skewX(10deg); }
.ex.why .why-badge b { font-size: 44px; font-weight: 900; font-stretch: 125%; font-style: italic; line-height: 1; }
.ex.why .why-badge span { font-size: 14px; font-weight: 600; line-height: 1.35; }
.ex.why .why-badge a { font-weight: 800; }
.ex.why .why-list { display: grid; grid-template-columns: 1fr 1fr; gap: 32px 36px; margin-top: 40px; }
.ex.why .why-list > div { padding-top: 20px; border-top: 2px solid transparent; border-image: var(--ex-arc) 1; }
.ex.why .why-list h3 { margin-bottom: 8px; font-size: 19px; font-weight: 700; line-height: 1.3; }
.ex.why .why-list p { font-size: 15.5px; color: var(--ex-text-dim); }

@media (max-width: 900px) {
	.ex.why .why-grid { grid-template-columns: minmax(0, 1fr); }
	.ex.why .why-img img { aspect-ratio: 4 / 3; }
}
@media (max-width: 640px) {
	.ex.why .why-list { grid-template-columns: 1fr; gap: 22px; margin-top: 28px; }
	.ex.why .why-badge { bottom: 20px; padding: 14px 18px; }
	.ex.why .why-badge b { font-size: 34px; }
}