/* Mango Pie — Water Purification category landing.
   Sits inside the Elessi category archive. Namespaced, inherits the theme font. */

.mpwp-landing {
  --mpwp-navy: #041123;
  --mpwp-aqua: #0f8fb5;
  --mpwp-line: rgba(15, 143, 181, .22);
  --mpwp-ink: #10202f;
  margin: 0 0 34px;
  color: #16283a;
}
.mpwp-landing * { box-sizing: border-box; }
.mpwp-landing h2 { font-size: clamp(20px, 2.2vw, 28px); margin: 0 0 .4em; color: #0b1a2a; }
.mpwp-landing h3 { font-size: 17px; margin: 0 0 .6em; color: #0b1a2a; }
.mpwp-landing p { margin: 0 0 .9em; line-height: 1.6; }
.mpwp-landing .mpwp-eyebrow {
  font-size: 11px; letter-spacing: .2em; text-transform: uppercase;
  color: var(--mpwp-aqua); font-weight: 700; margin-bottom: .5em;
}

.mpwp-landing-intro {
  background: linear-gradient(135deg, #041123 0%, #0a2c47 60%, #0f3b5c 100%);
  color: #e8f4fb; border-radius: 14px; padding: 30px 28px; margin-bottom: 22px;
}
.mpwp-landing-intro h2 { color: #fff; max-width: 22ch; }
.mpwp-landing-intro p { color: #b7d3e6; max-width: 62ch; }
.mpwp-landing-cta { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 18px; }

.mpwp-landing .mpwp-btn {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 44px; padding: 11px 20px; border-radius: 8px;
  font-weight: 600; font-size: 14px; text-decoration: none; border: 1px solid transparent;
  transition: transform .2s ease, background .2s ease;
}
.mpwp-landing .mpwp-btn:hover { transform: translateY(-1px); }
.mpwp-landing .mpwp-btn-primary { background: linear-gradient(135deg, #3ef0ff, #10a3cf); color: #021018; }
.mpwp-landing .mpwp-btn-secondary { background: rgba(62,240,255,.12); border-color: rgba(62,240,255,.4); color: #d9f3fb; }
.mpwp-landing-stages .mpwp-btn-secondary,
.mpwp-landing-testing .mpwp-btn-secondary { background: #eaf7fc; border-color: var(--mpwp-line); color: #0a3d54; }

.mpwp-landing-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 14px; margin-bottom: 24px; }
.mpwp-landing-card {
  display: block; padding: 20px; border: 1px solid var(--mpwp-line);
  border-radius: 12px; text-decoration: none; color: inherit; background: #fbfdff;
  transition: box-shadow .2s ease, transform .2s ease;
}
.mpwp-landing-card:hover { transform: translateY(-2px); box-shadow: 0 10px 26px rgba(10,60,90,.12); }
.mpwp-landing-card p { font-size: 13.5px; color: #4a6a80; }
.mpwp-landing-more { font-size: 13px; font-weight: 700; color: var(--mpwp-aqua); }

.mpwp-landing-stages, .mpwp-landing-testing, .mpwp-landing-faq {
  border: 1px solid var(--mpwp-line); border-radius: 12px; padding: 22px 24px; margin-bottom: 18px; background: #fbfdff;
}
.mpwp-landing-stages ol { margin: 0 0 16px; padding-left: 1.3em; }
.mpwp-landing-stages li { margin-bottom: .5em; font-size: 14px; color: #40617a; }
.mpwp-landing-stages strong { color: #0b1a2a; }

.mpwp-landing-faq details {
  border-top: 1px solid var(--mpwp-line); padding: 12px 0;
}
.mpwp-landing-faq details:first-of-type { border-top: 0; }
.mpwp-landing-faq summary { cursor: pointer; font-weight: 600; font-size: 15px; color: #0b1a2a; min-height: 30px; }
.mpwp-landing-faq p { margin: 10px 0 0; font-size: 14px; color: #40617a; }

@media (max-width: 760px) {
  .mpwp-landing-intro { padding: 22px 18px; }
  .mpwp-landing-stages, .mpwp-landing-testing, .mpwp-landing-faq { padding: 18px 16px; }
  .mpwp-landing-cta .mpwp-btn { width: 100%; }
}
@media (prefers-reduced-motion: reduce) {
  .mpwp-landing * { transition: none !important; }
}