/*
  shr-whybuyfromus-page-v3.css — Why Buy From Us 2026 (native) page-specific
  components. (v3 = the new native template; the legacy editor-content file
  is shr-why-buy-from-us-page.css, kept only as a revert fallback.)
  Loaded only on landing-pages/template-why-buy-from-us-2026.php
  (dep: shr-sections). Everything structural (sections, kickers, rules, h2,
  blueprint frames + corner marks, hover-lift, scroll-reveal, stat tiles,
  buttons) is reused from shr-sections.css / shr-shared.css. Only the
  genuinely unique bits live here — all scoped under .shr-whybuy.
*/

/* ═══════════ Hero ═══════════ */
.shr-whybuy-hero__grid { display: grid; grid-template-columns: 1.15fr .85fr; gap: clamp(32px, 5vw, 64px); align-items: center; }
.shr-whybuy-hero__title {
	font-family: var(--s2u-font-heading); font-weight: 600;
	font-size: clamp(32px, 4.2vw, 54px); line-height: 1.08; letter-spacing: .01em;
	text-transform: uppercase; color: var(--s2u-text); margin: 18px 0 20px;
}
.shr-whybuy-hero__lead { font-size: 17px; line-height: 1.6; color: var(--s2u-neutral-700); max-width: 68ch; margin: 0; }
/* Photo sits directly on the page background — no card, border, or shadow.
   A soft radial mask feathers the edges so it visually dissolves into the
   page rather than reading as a pasted-in rectangle. */
.shr-whybuy-hero__media img {
	width: 100%; height: auto; display: block;
	-webkit-mask-image: radial-gradient(ellipse 82% 86% at center, #000 62%, transparent 99%);
	mask-image: radial-gradient(ellipse 82% 86% at center, #000 62%, transparent 99%);
}

/* ═══════════ 6 reasons ═══════════ */
.shr-whybuy-intro { font-size: 15.5px; line-height: 1.6; color: var(--s2u-neutral-700); margin: 0 0 32px; max-width: 62ch; }
.shr-whybuy-reasons { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.shr-whybuy-card { padding: 24px; background: #fff; display: flex; flex-direction: column; gap: 10px; }
.shr-whybuy-card__head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 4px; }
.shr-whybuy-card__badge {
	font-size: 10.5px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase;
	color: var(--s2u-accent-700); background: var(--s2u-accent-100); padding: 4px 10px;
}
.shr-whybuy-card__title {
	font-family: var(--s2u-font-heading); font-weight: 600; font-size: 19px;
	text-transform: uppercase; color: var(--s2u-text); margin: 0;
}
.shr-whybuy-card__desc { font-size: 14.5px; line-height: 1.6; color: var(--s2u-neutral-700); margin: 0; }

/* ═══════════ CTA band (dark) ═══════════ */
.shr-whybuy-cta { display: flex; align-items: center; justify-content: space-between; gap: 32px; flex-wrap: wrap; }
.shr-whybuy-cta__copy { flex: 1 1 420px; }
.shr-whybuy-cta__copy .s2u-h2 { margin-bottom: 10px; }
.shr-whybuy-cta__copy p { font-size: 15.5px; line-height: 1.6; color: rgba(255, 255, 255, .72); margin: 0; max-width: 60ch; }
.shr-whybuy-cta__actions { display: flex; gap: 14px; flex-wrap: wrap; }

/* ═══════════ Responsive ═══════════ */
@media (max-width: 1000px) {
	.shr-whybuy-hero__grid { grid-template-columns: 1fr; }
	.shr-whybuy-hero__media { max-width: 420px; margin: 0 auto; }
	.shr-whybuy-reasons { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px) {
	.shr-whybuy-reasons { grid-template-columns: 1fr; }
}