/* Shared building blocks for the /why/<slug>/ pages — light theme, in the same
   language as the home navbar and hero (brand-v2.css): navy text, one brand blue,
   flat grounds, no glows or gradient text. Each page adds its OWN section CSS on
   top (inline) so every page still feels distinct. Widths come from layout.css. */
.why { color: #0B1B33; background: #fff; }

.why-hero {
  position: relative; overflow: hidden;
  background: #F7F9FC; color: #0B1B33;
  padding: clamp(56px, 8vw, 88px) 20px clamp(44px, 5vw, 64px);
  border-bottom: 1px solid #E3E8EF; text-align: center;
}
.why-glow { display: none; }
.why-hero-in { position: relative; z-index: 1; max-width: 1200px; margin: 0 auto; }
.why-eyebrow {
  display: inline-flex; align-items: center; gap: 8px; padding: 6px 14px; border-radius: 999px;
  margin-bottom: 22px; background: #fff; border: 1px solid #E3E8EF;
  font-size: 13px; font-weight: 600; letter-spacing: 0.02em; text-transform: none; color: #334155;
}
.why-eyebrow i { color: var(--brand, #0f6ed6); }
.why-h1 {
  font-size: clamp(36px, 4.6vw, 56px); font-weight: 800; letter-spacing: -0.035em; line-height: 1.06;
  margin: 0 auto 18px; color: #0B1B33;
}
.why-h1 .g { color: var(--brand, #0f6ed6); background: none; -webkit-text-fill-color: currentColor; }
.why-sub { font-size: clamp(17px, 1.5vw, 19px); line-height: 1.6; color: #475569; margin: 0 auto 30px; }
.why-ctas { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; margin-bottom: 44px; }
.why-btn {
  display: inline-flex; align-items: center; gap: 10px; height: 52px; padding: 0 24px; border-radius: 12px;
  font-weight: 600; font-size: 16px; text-decoration: none; transition: background .12s, border-color .12s, filter .12s;
}
.why-btn-p { background: var(--brand, #0f6ed6); color: #fff; box-shadow: 0 6px 18px rgba(15,110,214,0.25); }
.why-btn-p:hover { filter: brightness(0.94); color: #fff; }
.why-btn-g { background: #fff; color: #0B1B33; border: 1px solid #CBD5E1; }
.why-btn-g:hover { border-color: #94A3B8; color: #0B1B33; }
.why-shot {
  border-radius: 16px; overflow: hidden; border: 1px solid #DCE3EC; background: #fff;
  box-shadow: 0 30px 60px -20px rgba(11,27,51,0.25), 0 2px 6px rgba(11,27,51,0.06);
  max-width: 1160px; margin: 0 auto;
}
.why-shot img { display: block; width: 100%; height: auto; }

.why-wrap { max-width: 1200px; margin: 0 auto; padding: clamp(56px, 7vw, 88px) 20px; }
.why-wrap + .why-wrap { border-top: 1px solid #E3E8EF; }
.why-sec-h {
  font-size: clamp(28px, 3.2vw, 38px); font-weight: 800; letter-spacing: -0.025em; line-height: 1.15;
  margin: 0 0 10px; text-align: center; color: #0B1B33;
}
.why-sec-s { color: #475569; font-size: 17px; line-height: 1.6; text-align: center; margin: 0 auto 40px; }

/* Secondary screenshots — captioned figures, single or 2-up gallery. */
.why-gallery { display: grid; gap: 24px; margin-top: 8px; }
.why-gallery.two { grid-template-columns: 1fr 1fr; }
.why-figure {
  margin: 0; border-radius: 14px; overflow: hidden; border: 1px solid #E3E8EF; background: #fff;
  box-shadow: 0 18px 40px -26px rgba(11,27,51,0.25);
}
.why-figure.solo { margin: 8px auto 0; }
.why-figure img { display: block; width: 100%; height: auto; border-bottom: 1px solid #E3E8EF; }
.why-figcap { display: flex; align-items: flex-start; gap: 10px; padding: 16px 20px; font-size: 15px; color: #475569; line-height: 1.55; }
.why-figcap i { color: var(--brand, #0f6ed6); margin-top: 3px; flex: none; }
.why-figcap b { color: #0B1B33; font-weight: 700; }
@media (max-width: 820px) { .why-gallery.two { grid-template-columns: 1fr; } }

.why-cta {
  background: #F7F9FC; color: #0B1B33; text-align: center;
  padding: clamp(56px, 7vw, 88px) 20px; border-top: 1px solid #E3E8EF;
}
.why-cta h2 { font-size: clamp(28px, 3.4vw, 40px); font-weight: 800; margin: 0 0 12px; letter-spacing: -0.025em; }
.why-cta p { color: #475569; font-size: 17px; margin: 0 auto 28px; }

/* Headings and the lead line break into even lines (no lone last word) without
   a width cap: they still span the container. */
.why-h1, .why-sub, .why-sec-h, .why-cta h2 { text-wrap: balance; }