/* Ki — Why Electrolytes. A proper designed Science-page section (not a text
   block): centered serif header + a featured lead statement, the body
   paragraphs laid out as bordered cards with a teal accent rail, and the
   footnote set off below a hairline divider. Scoped under .ki-scope .ki-why-elx. */

.ki-scope .ki-why-elx { background: #fff; position: relative; text-align: center; }

.ki-scope .ki-why-elx .ki-why-elx-wrap {
  max-width: 1080px; margin: 0 auto; padding: 0 48px;
}

/* ───── header ───── */
.ki-scope .ki-why-elx .we-head {
  font-family: var(--ki-serif); font-weight: 400;
  font-size: clamp(32px, 4.2vw, 54px); line-height: 1.08; letter-spacing: -0.01em;
  color: var(--ki-blue-2); margin: 0 auto 16px; max-width: 18ch;
}
.ki-scope .ki-why-elx .we-head em { font-family: var(--ki-serif-italic); font-style: italic; }

.ki-scope .ki-why-elx .we-deck {
  font-family: var(--ki-sans); font-size: clamp(15px, 1.3vw, 17px); line-height: 1.6;
  color: var(--ki-ink-mute); margin: 0 auto; max-width: 56ch;
}

/* ───── featured lead statement ───── */
.ki-scope .ki-why-elx .we-lead {
  font-family: var(--ki-serif); font-weight: 400;
  font-size: clamp(22px, 2.5vw, 34px); line-height: 1.28; letter-spacing: -0.005em;
  color: var(--ki-ink); margin: 34px auto 0; max-width: 26ch;
}
.ki-scope .ki-why-elx .we-lead em { font-family: var(--ki-serif-italic); font-style: italic; }
.ki-scope .ki-why-elx .we-lead::after {
  content: ""; display: block; width: 52px; height: 2px;
  background: var(--ki-blue-2); border-radius: 2px; margin: 24px auto 0;
}

/* ───── body — bordered cards with a teal accent rail ───── */
.ki-scope .ki-why-elx .we-body {
  display: grid; grid-template-columns: 1fr 1fr; gap: 24px;
  margin: 52px auto 0; max-width: 1000px; text-align: left;
}
.ki-scope .ki-why-elx .we-body p {
  position: relative; margin: 0;
  background: #fff; border: 1px solid var(--ki-rule); border-radius: 16px;
  padding: 30px 32px 30px 36px;
  box-shadow: 0 16px 44px -32px rgba(27, 116, 138, 0.4);
  font-family: var(--ki-sans); font-size: clamp(15px, 1.25vw, 16.5px); line-height: 1.72;
  color: var(--ki-ink-mute);
  transition: transform 240ms ease, box-shadow 240ms ease, border-color 240ms ease;
}
.ki-scope .ki-why-elx .we-body p::before {
  content: ""; position: absolute; left: 0; top: 28px; bottom: 28px; width: 3px;
  background: var(--ki-blue-2); border-radius: 0 3px 3px 0;
}
.ki-scope .ki-why-elx .we-body p:hover {
  transform: translateY(-3px); border-color: var(--ki-blue-2);
  box-shadow: 0 24px 56px -30px rgba(27, 116, 138, 0.5);
}
.ki-scope .ki-why-elx .we-body p strong { color: var(--ki-ink); font-weight: 600; }
.ki-scope .ki-why-elx .we-body em { font-style: italic; }

/* ───── footnote — meta strip below a hairline divider ───── */
.ki-scope .ki-why-elx .we-foot {
  border-top: 1px solid var(--ki-rule);
  margin: 48px auto 0; padding-top: 26px; max-width: 1000px;
  font-family: var(--ki-sans); font-size: 13.5px; line-height: 1.65; font-weight: 500;
  color: var(--ki-ink-mute); text-align: center;
}

@media (max-width: 860px) {
  .ki-scope .ki-why-elx .we-body { grid-template-columns: 1fr; gap: 18px; max-width: 620px; }
}
@media (max-width: 760px) {
  .ki-scope .ki-why-elx .ki-why-elx-wrap { padding: 0 24px; }
}