/* ═══════════════════════════════════════════════════════
   IWTMYL VP DESIGN SYSTEM — SHARED CSS
   css/vp-system.css
   
   Enqueued site-wide via functions.php.
   Provides the full .vp component library so individual
   pages only need page-specific overrides in their
   Custom CSS box (chrome hiding + container breaking +
   page-unique components).
   
   Also includes .mp namespace for Municipal Partners.
   
   v1.0 — March 2026
   ═══════════════════════════════════════════════════════ */


/* ═══════════════════════════════════════════════════════
   A. VP NAMESPACE — BASE RESET
   ═══════════════════════════════════════════════════════ */

.vp, .vp * { box-sizing: border-box !important; }
.vp {
  color: #2f2f2f !important;
  background: transparent !important;
  font-family: inherit !important;
  line-height: 1.65 !important;
  font-size: 16px !important;
}
.vp .vp-wrap {
  max-width: 1060px !important;
  margin: 0 auto !important;
  padding: 0 24px !important;
}
.vp .vp-section {
  padding: 38px 0 !important;
  border-top: 1px solid #e5eae6 !important;
}
.vp .vp-section:first-child {
  border-top: 0 !important;
  padding-top: 12px !important;
}

/* WordPress spacing fix — kill rogue <p> and <br> injected by wpautop */
.vp .vp-wrap > p:empty,
.vp .vp-wrap > br,
.vp .vp-wrap > p > br:only-child {
  display: none !important;
  margin: 0 !important;
  padding: 0 !important;
  height: 0 !important;
  line-height: 0 !important;
  font-size: 0 !important;
}


/* ═══════════════════════════════════════════════════════
   B. TYPOGRAPHY
   ═══════════════════════════════════════════════════════ */

.vp .vp-kicker {
  display: inline-block !important;
  margin-bottom: 10px !important;
  color: #3b7f59 !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  letter-spacing: .08em !important;
  text-transform: uppercase !important;
}

.vp h1, .vp h2, .vp h3 {
  font-family: inherit !important;
  font-weight: 700 !important;
  line-height: 1.25 !important;
  color: #1c3a2a !important;
  margin: 0 0 12px !important;
  padding: 0 !important;
  letter-spacing: normal !important;
  text-transform: none !important;
}
.vp h1 { font-size: clamp(28px, 4vw, 40px) !important; }
.vp h2 { font-size: clamp(22px, 3vw, 28px) !important; }
.vp h3 { font-size: 18px !important; }

.vp p {
  margin: 0 0 14px !important;
  color: #2f2f2f !important;
  padding: 0 !important;
  line-height: 1.65 !important;
  font-family: inherit !important;
  font-size: 16px !important;
}

.vp a {
  color: #2f7d4d !important;
  text-decoration: none !important;
  font-weight: 600 !important;
  display: inline !important;
  background: none !important;
  border: none !important;
}
.vp a:hover { text-decoration: underline !important; }

.vp .vp-muted { color: #5f6b63 !important; }
.vp .vp-lead { font-size: 17px !important; color: #48534c !important; }
.vp .vp-center { text-align: center !important; }
.vp .vp-small { font-size: 13px !important; }

.vp strong, .vp b { font-weight: 700 !important; font-family: inherit !important; }
.vp em, .vp i { font-style: italic !important; font-family: inherit !important; }
.vp blockquote { margin: 0 !important; padding: 0 !important; border: none !important; background: none !important; }
.vp ul, .vp ol { list-style: none !important; margin: 0 !important; padding: 0 !important; }
.vp img { max-width: 100% !important; border: none !important; }


/* ═══════════════════════════════════════════════════════
   C. AUTHORITY BAR
   ═══════════════════════════════════════════════════════ */

.vp .vp-authority {
  text-align: center !important;
  padding: 9px 16px !important;
  background: #1c3a2a !important;
  color: #95d5b2 !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  letter-spacing: .03em !important;
  border-radius: 6px !important;
  margin-bottom: 24px !important;
}
.vp .vp-authority strong { color: #fff !important; }


/* ═══════════════════════════════════════════════════════
   D. HERO
   ═══════════════════════════════════════════════════════ */

.vp .vp-hero {
  background: linear-gradient(180deg, #f4f9f5 0%, #fff 100%) !important;
  border: 1px solid #dce9df !important;
  border-radius: 10px !important;
  overflow: hidden !important;
}
.vp .vp-hero-grid {
  display: grid !important;
  grid-template-columns: 1.15fr .85fr !important;
  gap: 28px !important;
  align-items: center !important;
  padding: 28px !important;
}
.vp .vp-hero h1 em { color: #2f7d4d !important; font-style: normal !important; }
.vp .vp-hero-sidebar {
  background: #fff !important;
  border: 1px solid #dfe8e1 !important;
  border-radius: 10px !important;
  padding: 20px !important;
}
.vp .vp-hero-sidebar h3 { margin-bottom: 10px !important; }
.vp .vp-hero-grid > p:empty,
.vp .vp-hero-grid > br { display: none !important; }


/* ═══════════════════════════════════════════════════════
   E. BUTTONS
   ═══════════════════════════════════════════════════════ */

.vp .vp-btn,
.vp a.vp-btn,
.vp button.vp-btn {
  display: inline-block !important;
  padding: 12px 20px !important;
  border-radius: 6px !important;
  font-size: 15px !important;
  font-weight: 700 !important;
  text-decoration: none !important;
  transition: transform .15s, box-shadow .15s !important;
  line-height: 1 !important;
  cursor: pointer !important;
  border: none !important;
  box-shadow: none !important;
  letter-spacing: normal !important;
  text-transform: none !important;
  text-indent: 0 !important;
  height: auto !important;
  width: auto !important;
  font-family: inherit !important;
  text-align: center !important;
}
.vp .vp-btn:hover,
.vp a.vp-btn:hover,
.vp button.vp-btn:hover {
  transform: translateY(-1px) !important;
  box-shadow: 0 4px 12px rgba(0,0,0,.1) !important;
  text-decoration: none !important;
}

/* Primary */
.vp .vp-btn--primary, .vp a.vp-btn--primary { background: #2f7d4d !important; color: #fff !important; }
.vp .vp-btn--primary:hover, .vp a.vp-btn--primary:hover { background: #276741 !important; color: #fff !important; }

/* Secondary */
.vp .vp-btn--secondary,
.vp a.vp-btn--secondary,
.vp button.vp-btn--secondary { background: #eef6f0 !important; color: #2f7d4d !important; border: 1px solid #cfe2d3 !important; }
.vp .vp-btn--secondary:hover,
.vp a.vp-btn--secondary:hover,
.vp button.vp-btn--secondary:hover { background: #e0ede4 !important; color: #255f3a !important; }

/* Ghost (for dark backgrounds) */
.vp .vp-btn--ghost, .vp a.vp-btn--ghost {
  background: transparent !important;
  color: #fff !important;
  border: 2px solid rgba(255,255,255,.5) !important;
}

/* Outline-light (for dark cards) */
.vp .vp-btn--outline-light, .vp a.vp-btn--outline-light {
  background: transparent !important;
  border: 1px solid #95d5b2 !important;
  color: #95d5b2 !important;
}
.vp .vp-btn--outline-light:hover, .vp a.vp-btn--outline-light:hover {
  background: rgba(149,213,178,.12) !important;
  color: #95d5b2 !important;
}

/* Sizes & spacing */
.vp .vp-btn-lg { font-size: 17px !important; padding: 14px 32px !important; }
.vp .vp-btn-mt { margin-top: 16px !important; }
.vp .vp-center-cta { margin-top: 20px !important; text-align: center !important; }


/* ═══════════════════════════════════════════════════════
   F. LAYOUT — FLEX ROWS
   ═══════════════════════════════════════════════════════ */

.vp .vp-row {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 10px !important;
  flex-direction: row !important;
  align-items: center !important;
  margin-top: 14px !important;
}
.vp .vp-row--center { justify-content: center !important; }
.vp .vp-row > p:empty, .vp .vp-row > br { display: none !important; }


/* ═══════════════════════════════════════════════════════
   G. CHIPS (pills)
   ═══════════════════════════════════════════════════════ */

.vp .vp-chip {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  padding: 7px 13px !important;
  border-radius: 999px !important;
  background: #eef6f0 !important;
  border: 1px solid #d8e7dc !important;
  color: #355842 !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  white-space: nowrap !important;
  flex: 0 0 auto !important;
}
.vp .vp-chip-mb { margin-bottom: 16px !important; }
.vp .vp-chips-row {
  display: flex !important;
  flex-wrap: wrap !important;
  flex-direction: row !important;
  gap: 8px !important;
  align-items: center !important;
  margin-top: 14px !important;
}
.vp .vp-chips-row > p:empty, .vp .vp-chips-row > br { display: none !important; }
.vp .vp-chip-shield {
  background: #d8f3dc !important;
  color: #1c3a2a !important;
  border: 1px solid #95d5b2 !important;
  font-weight: 600 !important;
}


/* ═══════════════════════════════════════════════════════
   H. GRIDS
   ═══════════════════════════════════════════════════════ */

.vp .vp-grid-2,
.vp .vp-grid-3,
.vp .vp-grid-4 {
  display: grid !important;
  gap: 18px !important;
  margin-top: 16px !important;
}
.vp .vp-grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
.vp .vp-grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; }
.vp .vp-grid-4 { grid-template-columns: repeat(4, minmax(0, 1fr)) !important; }

/* Ghost-busting: kill stray <p> and <br> WordPress injects between grid children */
.vp .vp-grid-2 > p, .vp .vp-grid-2 > br,
.vp .vp-grid-3 > p, .vp .vp-grid-3 > br,
.vp .vp-grid-4 > p, .vp .vp-grid-4 > br { display: none !important; }


/* ═══════════════════════════════════════════════════════
   I. CARDS
   ═══════════════════════════════════════════════════════ */

.vp .vp-card {
  background: #fff !important;
  border: 1px solid #dfe8e1 !important;
  border-radius: 10px !important;
  padding: 20px !important;
  box-shadow: 0 1px 3px rgba(0,0,0,.03) !important;
  transition: box-shadow .2s, transform .2s !important;
}
.vp .vp-card:hover {
  box-shadow: 0 4px 16px rgba(47,125,77,.08) !important;
  transform: translateY(-2px) !important;
}
.vp .vp-card h3 { margin-bottom: 8px !important; }
.vp .vp-card .vp-emoji {
  font-size: 28px !important;
  display: block !important;
  margin-bottom: 10px !important;
}
.vp .vp-card p { font-size: 15px !important; color: #555 !important; }


/* ═══════════════════════════════════════════════════════
   J. TRUST STRIP
   ═══════════════════════════════════════════════════════ */

.vp .vp-trust {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 18px 28px !important;
  justify-content: center !important;
  padding: 20px 0 !important;
  font-size: 13px !important;
  color: #555 !important;
  font-weight: 600 !important;
  flex-direction: row !important;
}
.vp .vp-trust-item {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  white-space: nowrap !important;
  flex: 0 0 auto !important;
}
.vp .vp-trust > p:empty, .vp .vp-trust > br { display: none !important; }


/* ═══════════════════════════════════════════════════════
   K. QUOTE CARD
   ═══════════════════════════════════════════════════════ */

.vp .vp-quote-card {
  background: #1c3a2a !important;
  color: #fff !important;
  border-radius: 10px !important;
  padding: 28px 24px !important;
}
.vp .vp-quote-card .vp-quote-mark {
  font-size: 48px !important;
  color: #95d5b2 !important;
  line-height: .8 !important;
  display: block !important;
  margin-bottom: 8px !important;
  font-family: Georgia, serif !important;
}
.vp .vp-quote-card blockquote,
.vp .vp-quote-card blockquote * {
  font-size: 17px !important;
  font-style: italic !important;
  color: rgba(255,255,255,.92) !important;
  line-height: 1.6 !important;
  opacity: 1 !important;
  visibility: visible !important;
}
.vp .vp-quote-card cite,
.vp .vp-quote-card cite * {
  display: block !important;
  margin-top: 14px !important;
  font-size: 12px !important;
  font-style: normal !important;
  color: #95d5b2 !important;
  font-weight: 700 !important;
  letter-spacing: .05em !important;
  text-transform: uppercase !important;
  opacity: 1 !important;
  visibility: visible !important;
}


/* ═══════════════════════════════════════════════════════
   L. NOTE / CALLOUT
   ═══════════════════════════════════════════════════════ */

.vp .vp-note {
  background: #f7faf8 !important;
  border-left: 4px solid #2f7d4d !important;
  padding: 14px 16px !important;
  border-radius: 0 8px 8px 0 !important;
  font-size: 15px !important;
  color: #48534c !important;
  margin-top: 12px !important;
}


/* ═══════════════════════════════════════════════════════
   M. STEPS
   ═══════════════════════════════════════════════════════ */

.vp .vp-steps { list-style: none !important; margin: 0 !important; padding: 0 !important; }
.vp .vp-steps-card { padding: 20px !important; }
.vp .vp-step {
  display: grid !important;
  grid-template-columns: 42px 1fr !important;
  gap: 16px !important;
  align-items: flex-start !important;
  padding: 18px 0 !important;
  border-bottom: 1px solid #e8ece7 !important;
}
.vp .vp-step:last-child { border-bottom: 0 !important; }
.vp .vp-step-num {
  width: 36px !important;
  height: 36px !important;
  border-radius: 50% !important;
  background: #2f7d4d !important;
  color: #fff !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 15px !important;
  font-weight: 700 !important;
  flex-shrink: 0 !important;
  line-height: 1 !important;
  padding: 0 !important;
}
.vp .vp-step h3 { margin-bottom: 4px !important; }
.vp .vp-step p { font-size: 15px !important; color: #555 !important; margin: 0 !important; }
.vp .vp-step a { color: #2f7d4d !important; font-weight: 600 !important; }
.vp .vp-steps-card > p, .vp .vp-steps-card > br { display: none !important; }


/* ═══════════════════════════════════════════════════════
   N. STATS
   ═══════════════════════════════════════════════════════ */

.vp .vp-stat { text-align: center !important; padding: 22px 14px !important; }
.vp .vp-stat-num {
  display: block !important;
  font-size: 32px !important;
  font-weight: 700 !important;
  color: #1c3a2a !important;
  line-height: 1.1 !important;
  margin-bottom: 6px !important;
}
.vp .vp-stat-label {
  font-size: 13px !important;
  color: #5f6b63 !important;
  line-height: 1.4 !important;
}


/* ═══════════════════════════════════════════════════════
   O. CHECKLIST
   ═══════════════════════════════════════════════════════ */

.vp .vp-checklist { list-style: none !important; margin: 0 !important; padding: 0 !important; }
.vp .vp-checklist li {
  position: relative !important;
  padding-left: 28px !important;
  margin-bottom: 10px !important;
  font-size: 15px !important;
  color: #333 !important;
  display: block !important;
}
.vp .vp-checklist li::before {
  content: "\2713" !important;
  position: absolute !important;
  left: 0 !important;
  top: 0 !important;
  color: #2f7d4d !important;
  font-weight: 900 !important;
  font-size: 14px !important;
}


/* ═══════════════════════════════════════════════════════
   P. FAQ ACCORDION
   ═══════════════════════════════════════════════════════ */

.vp .vp-faq { margin-top: 16px !important; }
.vp .vp-faq details {
  border: 1px solid #dfe8e1 !important;
  border-radius: 8px !important;
  background: #fff !important;
  margin-bottom: 10px !important;
  overflow: hidden !important;
  padding: 0 !important;
}
.vp .vp-faq summary {
  cursor: pointer !important;
  font-weight: 700 !important;
  color: #1c3a2a !important;
  padding: 16px 18px !important;
  font-size: 15px !important;
  list-style: none !important;
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  margin: 0 !important;
  background: transparent !important;
}
.vp .vp-faq summary:hover { background: #f7faf8 !important; }
.vp .vp-faq summary::-webkit-details-marker { display: none !important; }
.vp .vp-faq summary::after {
  content: '+' !important;
  font-size: 20px !important;
  color: #2f7d4d !important;
  font-weight: 400 !important;
  transition: transform .2s !important;
}
.vp .vp-faq details[open] summary::after { transform: rotate(45deg) !important; }
.vp .vp-faq .vp-faq-body {
  padding: 0 18px 16px !important;
  font-size: 15px !important;
  color: #4b564f !important;
  line-height: 1.65 !important;
}
.vp .vp-faq .vp-faq-body a { color: #2f7d4d !important; font-weight: 600 !important; }


/* ═══════════════════════════════════════════════════════
   Q. SHARE BUTTONS
   ═══════════════════════════════════════════════════════ */

.vp .vp-share-row {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 10px !important;
  justify-content: center !important;
  margin-top: 16px !important;
  flex-direction: row !important;
}
.vp .vp-share-btn,
.vp a.vp-share-btn,
.vp button.vp-share-btn {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  padding: 10px 18px !important;
  border-radius: 6px !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  color: #fff !important;
  text-decoration: none !important;
  border: none !important;
  cursor: pointer !important;
  line-height: 1 !important;
  height: auto !important;
  box-shadow: none !important;
  width: auto !important;
  flex: 0 0 auto !important;
}
.vp .vp-share-btn:hover,
.vp a.vp-share-btn:hover { opacity: .85 !important; text-decoration: none !important; color: #fff !important; }
.vp .share-fb { background: #1877F2 !important; }
.vp .share-x { background: #000 !important; }
.vp .share-li { background: #0A66C2 !important; }
.vp .share-nd { background: #8ED500 !important; color: #1c3a2a !important; }
.vp .share-em { background: #555 !important; }
.vp .share-cp { background: #2f7d4d !important; }
.vp .vp-share-row > p:empty, .vp .vp-share-row > br { display: none !important; }


/* ═══════════════════════════════════════════════════════
   R. EMBED / CODE BLOCK
   ═══════════════════════════════════════════════════════ */

.vp .vp-embed {
  background: #f7faf8 !important;
  border: 1px solid #dfe8e1 !important;
  border-radius: 10px !important;
  padding: 20px !important;
  max-width: 640px !important;
  margin: 18px auto 0 !important;
  text-align: left !important;
}
.vp .vp-embed-code,
.vp .vp-embed pre {
  background: #1c3a2a !important;
  color: #95d5b2 !important;
  font-family: 'Courier New', monospace !important;
  font-size: 11px !important;
  padding: 12px 14px !important;
  border-radius: 6px !important;
  overflow-x: auto !important;
  white-space: pre !important;
  line-height: 1.5 !important;
  margin: 10px 0 !important;
}


/* ═══════════════════════════════════════════════════════
   S. FINAL CTA
   ═══════════════════════════════════════════════════════ */

.vp .vp-final {
  text-align: center !important;
  background: #1c3a2a !important;
  color: #fff !important;
  border-radius: 10px !important;
  padding: 36px 28px !important;
}
.vp .vp-final h2 { color: #fff !important; }
.vp .vp-final h2 em { color: #95d5b2 !important; font-style: normal !important; }
.vp .vp-final p { color: rgba(255,255,255,.8) !important; }
.vp .vp-final .vp-kicker { color: #95d5b2 !important; }
.vp .vp-final a,
.vp .vp-final a.vp-btn { color: #fff !important; }
.vp .vp-final a:hover { opacity: .85 !important; text-decoration: none !important; }
.vp .vp-final-footer {
  margin-top: 20px !important;
  font-size: 12px !important;
  color: rgba(255,255,255,.4) !important;
}
.vp .vp-final-footer a { color: #95d5b2 !important; }
.vp .vp-final .vp-btn--ghost {
  border-color: rgba(255,255,255,.4) !important;
  font-size: 14px !important;
  padding: 11px 22px !important;
}


/* ═══════════════════════════════════════════════════════
   T. COMMUNITY PULSE LINE
   ═══════════════════════════════════════════════════════ */

.vp .vp-pulse {
  font-size: 14px !important;
  color: rgba(255,255,255,.55) !important;
  font-style: italic !important;
  margin-bottom: 20px !important;
  text-align: center !important;
  letter-spacing: .01em !important;
}
.vp .vp-pulse .vp-pulse-line,
.vp .vp-pulse span {
  color: rgba(255,255,255,.55) !important;
  font-style: italic !important;
  font-size: 14px !important;
}


/* ═══════════════════════════════════════════════════════
   U. FOUNDER
   ═══════════════════════════════════════════════════════ */

.vp .vp-founder {
  display: grid !important;
  grid-template-columns: auto 1fr !important;
  gap: 24px !important;
  align-items: flex-start !important;
  margin-top: 12px !important;
}
.vp .vp-founder-img {
  width: 100px !important;
  height: 100px !important;
  border-radius: 50% !important;
  object-fit: cover !important;
  border: 3px solid #2f7d4d !important;
}
.vp .vp-founder-sig {
  font-style: italic !important;
  color: #2f7d4d !important;
  font-size: 17px !important;
  margin-top: 4px !important;
}
.vp .vp-founder > p:empty,
.vp .vp-founder > br { display: none !important; }


/* ═══════════════════════════════════════════════════════
   V. APP STORE BADGE
   ═══════════════════════════════════════════════════════ */

.vp .vp-app-badge-link {
  display: inline-block !important;
  background: none !important;
  border: none !important;
  padding: 0 !important;
  line-height: 0 !important;
}
.vp .vp-app-badge-link:hover { opacity: .85 !important; text-decoration: none !important; }
.vp .vp-app-badge-img {
  height: 40px !important;
  width: auto !important;
  display: inline-block !important;
  border-radius: 0 !important;
  border: none !important;
}
.vp .vp-app-badge-img-sm { height: 34px !important; }


/* ═══════════════════════════════════════════════════════
   W. VIDEO EMBED (shared between About & HIW)
   ═══════════════════════════════════════════════════════ */

.vp .about-video-embed,
.vp .hiw-video-embed {
  position: relative !important;
  width: 100% !important;
  padding-bottom: 56.25% !important;
  background: #f4f9f5 !important;
  border: 1px solid #dce9df !important;
  border-radius: 10px !important;
  overflow: hidden !important;
  margin-top: 12px !important;
}
.vp .about-video-embed iframe,
.vp .hiw-video-embed iframe {
  position: absolute !important;
  top: 0 !important; left: 0 !important;
  width: 100% !important; height: 100% !important;
  border: none !important; border-radius: 10px !important;
}


/* ═══════════════════════════════════════════════════════
   X. MOW-COUNT / LIVE-STAT SHORTCODE OVERRIDES
   ═══════════════════════════════════════════════════════ */

.vp .vp-stat .mow-count,
.vp .vp-stat-num .mow-count {
  font-weight: inherit !important;
  color: inherit !important;
  font-size: inherit !important;
}
.vp .vp-note .mow-count {
  font-weight: 800 !important;
  color: #1c3a2a !important;
  font-size: inherit !important;
}


/* ═══════════════════════════════════════════════════════
   Y. RESPONSIVE — VP NAMESPACE
   ═══════════════════════════════════════════════════════ */

@media (max-width: 900px) {
  .vp .vp-hero-grid,
  .vp .vp-grid-2,
  .vp .vp-grid-3,
  .vp .vp-grid-4,
  .vp .vp-founder { grid-template-columns: 1fr !important; }
  .vp .vp-founder-img { justify-self: center !important; }
}
@media (max-width: 600px) {
  .vp .vp-wrap { padding: 0 14px !important; }
  .vp .vp-hero-grid { padding: 20px !important; }
  .vp .vp-section { padding: 28px 0 !important; }
}


/* ═══════════════════════════════════════════════════════
   Z. MP NAMESPACE — MUNICIPAL PARTNERS
   Same design language, prefixed .mp to avoid collision.
   Only includes rules that differ or are unique to .mp.
   ═══════════════════════════════════════════════════════ */

.mp, .mp * { box-sizing: border-box !important; }
.mp {
  color: #2f2f2f !important;
  background: transparent !important;
  font-family: inherit !important;
  line-height: 1.65 !important;
  font-size: 16px !important;
}
.mp .mp-wrap {
  max-width: 1060px !important;
  margin: 0 auto !important;
  padding: 0 24px !important;
}
.mp .mp-section {
  padding: 38px 0 !important;
  border-top: 1px solid #e5eae6 !important;
}
.mp .mp-section:first-child { border-top: 0 !important; padding-top: 12px !important; }
.mp .mp-section--compact { padding: 24px 0 !important; }

/* MP Typography */
.mp .mp-kicker {
  display: inline-block !important; margin-bottom: 10px !important;
  color: #3b7f59 !important; font-size: 12px !important; font-weight: 700 !important;
  letter-spacing: .08em !important; text-transform: uppercase !important;
}
.mp h1, .mp h2, .mp h3 {
  font-family: inherit !important; font-weight: 700 !important; line-height: 1.25 !important;
  color: #1c3a2a !important; margin: 0 0 12px !important; padding: 0 !important;
}
.mp h1 { font-size: clamp(28px, 4vw, 40px) !important; }
.mp h1 em { color: #2f7d4d !important; font-style: normal !important; }
.mp h2 { font-size: clamp(22px, 3vw, 28px) !important; }
.mp h3 { font-size: 18px !important; }
.mp p { margin: 0 0 14px !important; color: #2f2f2f !important; line-height: 1.65 !important; font-size: 16px !important; }
.mp a { color: #2f7d4d !important; text-decoration: none !important; font-weight: 600 !important; display: inline !important; }
.mp a:hover { text-decoration: underline !important; }
.mp .mp-muted { color: #5f6b63 !important; }
.mp .mp-lead { font-size: 17px !important; color: #48534c !important; }
.mp .mp-center { text-align: center !important; }
.mp .mp-small { font-size: 13px !important; }
.mp strong { font-weight: 700 !important; }
.mp blockquote { margin: 0 !important; padding: 0 !important; border: none !important; background: none !important; }
.mp ul, .mp ol { list-style: none !important; margin: 0 !important; padding: 0 !important; }
.mp img { max-width: 100% !important; border: none !important; }
.mp svg { width: auto !important; height: auto !important; }

/* MP Authority */
.mp .mp-authority {
  text-align: center !important; padding: 9px 16px !important;
  background: #1c3a2a !important; color: #95d5b2 !important;
  font-size: 13px !important; font-weight: 600 !important;
  border-radius: 6px !important; margin-bottom: 24px !important;
}
.mp .mp-authority strong { color: #fff !important; }

/* MP Hero */
.mp .mp-hero {
  background: linear-gradient(180deg, #f4f9f5 0%, #fff 100%) !important;
  border: 1px solid #dce9df !important; border-radius: 10px !important; overflow: hidden !important;
}
.mp .mp-hero-grid {
  display: grid !important; grid-template-columns: 1.2fr .8fr !important;
  gap: 28px !important; align-items: center !important; padding: 28px !important;
}
.mp .mp-hero-sidebar {
  background: #fff !important; border: 1px solid #dfe8e1 !important;
  border-radius: 10px !important; padding: 22px !important;
}
.mp .mp-hotline-num {
  font-size: 26px !important; font-weight: 700 !important; color: #1c3a2a !important;
  display: block !important;
}
.mp .mp-sidebar-box {
  background: #eef6f0 !important; border-radius: 8px !important;
  padding: 12px !important; margin-bottom: 12px !important;
}

/* MP Buttons */
.mp .mp-btn, .mp a.mp-btn, .mp button.mp-btn {
  display: inline-block !important; padding: 12px 22px !important; border-radius: 6px !important;
  font-size: 15px !important; font-weight: 700 !important; text-decoration: none !important;
  transition: transform .15s, box-shadow .15s !important; line-height: 1 !important;
  cursor: pointer !important; border: none !important; font-family: inherit !important; text-align: center !important;
}
.mp .mp-btn:hover { transform: translateY(-1px) !important; box-shadow: 0 4px 12px rgba(0,0,0,.1) !important; }
.mp .mp-btn--primary { background: #2f7d4d !important; color: #fff !important; }
.mp .mp-btn--primary:hover { background: #276741 !important; }
.mp .mp-btn--secondary { background: #eef6f0 !important; color: #2f7d4d !important; border: 1px solid #cfe2d3 !important; }
.mp .mp-btn--secondary:hover { background: #e0ede4 !important; }
.mp .mp-btn--ghost { background: rgba(255,255,255,.15) !important; color: #fff !important; border: 2px solid rgba(255,255,255,.4) !important; }
.mp .mp-btn--cta { background: #95d5b2 !important; color: #1c3a2a !important; }
.mp .mp-btn--cta:hover { background: #b5e4cc !important; }
.mp .mp-btn-full { width: 100% !important; text-align: center !important; }

/* MP Layout */
.mp .mp-row { display: flex !important; flex-wrap: wrap !important; gap: 10px !important; margin-top: 14px !important; }
.mp .mp-row--center { justify-content: center !important; }

/* MP Chips */
.mp .mp-chip {
  display: inline-flex !important; padding: 5px 11px !important; border-radius: 999px !important;
  background: #eef6f0 !important; border: 1px solid #d8e7dc !important;
  color: #5a7263 !important; font-size: 12px !important; font-weight: 600 !important;
}
.mp .mp-chips-row { display: flex !important; flex-wrap: wrap !important; gap: 6px !important; margin-top: 14px !important; }

/* MP Grids */
.mp .mp-grid-2, .mp .mp-grid-3, .mp .mp-grid-4 { display: grid !important; gap: 18px !important; margin-top: 16px !important; }
.mp .mp-grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
.mp .mp-grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; }
.mp .mp-grid-4 { grid-template-columns: repeat(4, minmax(0, 1fr)) !important; }
.mp .mp-grid-2 > p, .mp .mp-grid-2 > br,
.mp .mp-grid-3 > p, .mp .mp-grid-3 > br,
.mp .mp-grid-4 > p, .mp .mp-grid-4 > br { display: none !important; }

/* MP Cards */
.mp .mp-card {
  background: #fff !important; border: 1px solid #dfe8e1 !important; border-radius: 10px !important;
  padding: 22px !important; box-shadow: 0 1px 3px rgba(0,0,0,.03) !important;
  transition: box-shadow .2s, transform .2s !important;
}
.mp .mp-card:hover { box-shadow: 0 4px 16px rgba(47,125,77,.08) !important; transform: translateY(-2px) !important; }
.mp .mp-card--green-top { border-top: 3px solid #2f7d4d !important; }
.mp .mp-card--red-top { border-top: 3px solid #e0685a !important; }
.mp .mp-emoji { font-size: 28px !important; display: block !important; margin-bottom: 10px !important; }
.mp .mp-color-red { color: #c0392b !important; }

/* MP Quote */
.mp .mp-quote-card { background: #1c3a2a !important; color: #fff !important; border-radius: 10px !important; padding: 28px 24px !important; }
.mp .mp-quote-card .mp-quote-mark { font-size: 48px !important; color: #95d5b2 !important; line-height: .8 !important; display: block !important; margin-bottom: 8px !important; font-family: Georgia, serif !important; }
.mp .mp-quote-card blockquote { font-size: 17px !important; font-style: italic !important; color: rgba(255,255,255,.92) !important; line-height: 1.6 !important; }
.mp .mp-quote-card cite { display: block !important; margin-top: 14px !important; font-size: 12px !important; color: #95d5b2 !important; font-weight: 700 !important; text-transform: uppercase !important; }

/* MP Note */
.mp .mp-note { background: #f7faf8 !important; border-left: 4px solid #2f7d4d !important; padding: 14px 16px !important; border-radius: 0 8px 8px 0 !important; font-size: 15px !important; color: #48534c !important; margin-top: 12px !important; }
.mp .mp-note--amber { background: #fff8f0 !important; border-left-color: #e8a44a !important; font-size: 12px !important; }
.mp .mp-note--amber strong { color: #b56b00 !important; }

/* MP Steps */
.mp .mp-steps-card { padding: 22px !important; max-width: 100% !important; }
.mp .mp-step { display: flex !important; gap: 16px !important; align-items: flex-start !important; padding: 18px 0 !important; border-bottom: 1px solid #e8ece7 !important; }
.mp .mp-step:last-child, .mp .mp-step:last-of-type { border-bottom: 0 !important; }
.mp .mp-step-num { width: 36px !important; min-width: 36px !important; height: 36px !important; border-radius: 50% !important; background: #2f7d4d !important; color: #fff !important; display: flex !important; align-items: center !important; justify-content: center !important; font-size: 15px !important; font-weight: 700 !important; flex-shrink: 0 !important; }
.mp .mp-step-body { flex: 1 !important; min-width: 0 !important; }
.mp .mp-step-body h3 { margin-bottom: 4px !important; }
.mp .mp-step-body p { font-size: 15px !important; color: #555 !important; margin: 0 !important; }
.mp .mp-steps-card > p, .mp .mp-steps-card > br { display: none !important; }

/* MP Stats */
.mp .mp-stat { text-align: center !important; padding: 22px 14px !important; }
.mp .mp-stat-num { display: block !important; font-size: 32px !important; font-weight: 700 !important; color: #1c3a2a !important; line-height: 1.1 !important; margin-bottom: 6px !important; }
.mp .mp-stat-num span, .mp .mp-stat-num .mow-count { font-size: 32px !important; font-weight: 700 !important; color: #1c3a2a !important; }
.mp .mp-stat-label { font-size: 13px !important; color: #5f6b63 !important; line-height: 1.4 !important; }

/* MP Checklist (div-based) */
.mp .mp-checklist { margin: 0 !important; padding: 0 !important; }
.mp .mp-check-item { position: relative !important; padding-left: 28px !important; margin-bottom: 10px !important; font-size: 15px !important; color: #333 !important; display: block !important; }
.mp .mp-check-item::before { content: "\2713" !important; position: absolute !important; left: 0 !important; top: 0 !important; color: #2f7d4d !important; font-weight: 900 !important; font-size: 14px !important; }
.mp .mp-checklist--muted .mp-check-item { color: #888 !important; }
.mp .mp-checklist--muted .mp-check-item::before { color: #ccc !important; }
.mp .mp-checklist > p, .mp .mp-checklist > br { display: none !important; }

/* MP Trust */
.mp .mp-trust { display: flex !important; flex-wrap: wrap !important; gap: 18px 28px !important; justify-content: center !important; padding: 16px 0 !important; font-size: 13px !important; color: #555 !important; font-weight: 600 !important; }
.mp .mp-trust-item { display: inline-flex !important; align-items: center !important; gap: 6px !important; white-space: nowrap !important; }

/* MP FAQ */
.mp .mp-faq { margin-top: 16px !important; }
.mp .mp-faq details { border: 1px solid #dfe8e1 !important; border-radius: 8px !important; background: #fff !important; margin-bottom: 10px !important; overflow: hidden !important; padding: 0 !important; }
.mp .mp-faq summary { cursor: pointer !important; font-weight: 700 !important; color: #1c3a2a !important; padding: 16px 18px !important; font-size: 15px !important; list-style: none !important; display: flex !important; justify-content: space-between !important; align-items: center !important; margin: 0 !important; background: transparent !important; }
.mp .mp-faq summary:hover { background: #f7faf8 !important; }
.mp .mp-faq summary::-webkit-details-marker { display: none !important; }
.mp .mp-faq summary::after { content: '+' !important; font-size: 20px !important; color: #2f7d4d !important; font-weight: 400 !important; transition: transform .2s !important; }
.mp .mp-faq details[open] summary::after { transform: rotate(45deg) !important; }
.mp .mp-faq .mp-faq-body { padding: 0 18px 16px !important; font-size: 15px !important; color: #4b564f !important; line-height: 1.65 !important; }

/* MP Share */
.mp .mp-share-row { display: flex !important; flex-wrap: wrap !important; gap: 8px !important; justify-content: center !important; margin-top: 16px !important; }
.mp .mp-share-btn, .mp button.mp-share-btn { display: inline-flex !important; align-items: center !important; gap: 6px !important; padding: 10px 16px !important; border-radius: 6px !important; font-size: 13px !important; font-weight: 700 !important; color: #fff !important; border: none !important; cursor: pointer !important; transition: opacity .2s !important; }
.mp button.mp-share-btn:hover { opacity: .9 !important; }

/* MP Final CTA */
.mp .mp-final-cta { text-align: center !important; background: #1c3a2a !important; color: #fff !important; border-radius: 10px !important; padding: 36px 28px !important; }
.mp .mp-final-cta h2 { color: #fff !important; }
.mp .mp-final-cta p { color: rgba(255,255,255,.85) !important; }

/* MP Footer */
.mp .mp-footer { text-align: center !important; padding: 20px 0 32px !important; font-size: 12px !important; color: #5f6b63 !important; line-height: 1.6 !important; }

/* MP Responsive */
@media (max-width: 900px) {
  .mp .mp-hero-grid, .mp .mp-grid-2, .mp .mp-grid-3, .mp .mp-grid-4 { grid-template-columns: 1fr !important; }
}
@media (max-width: 600px) {
  .mp .mp-wrap { padding: 0 14px !important; }
  .mp .mp-hero-grid { padding: 20px !important; }
  .mp .mp-section { padding: 28px 0 !important; }
  .mp .mp-final-cta { padding: 28px 20px !important; }
  .mp .mp-row { flex-direction: column !important; }
  .mp .mp-row .mp-btn { width: 100% !important; text-align: center !important; }
  .mp .mp-stat-num, .mp .mp-stat-num span, .mp .mp-stat-num .mow-count { font-size: 26px !important; }
}
