/* ==========================================================================
   Membership page (page-templates/template-membership.php)
   Standalone stylesheet, enqueued only on pages using that template
   (see inc/membership-page.php). Does not touch child-theme.min.css.
   ========================================================================== */
.mp-page {
  --mp-dark: #27292c;
  --mp-blue: #154b9d;
  --mp-accent: #4aaee6;
  --mp-red: #c62828;
  --mp-green: #28a745;
  --mp-gray: #eceef2;
  --mp-muted: #6b7078;
  --mp-line: #e1e4e8; }

.mp-page h1, .mp-page h2, .mp-page h3 {
  font-family: "Raleway", sans-serif;
  text-transform: none; }

/* Hero */
.mp-hero { background: var(--mp-dark); padding: 3.5rem 0 6.5rem; }
.mp-badge { display: inline-block; background: var(--mp-blue); color: #fff; font: 800 12px/1 "Raleway", sans-serif; letter-spacing: .08em; text-transform: uppercase; padding: .6rem .95rem; border-radius: 50px; margin-bottom: 1.25rem; }
.mp-page .mp-hero h1 { color: #fff; font-size: 44px; line-height: 1.1; font-weight: 900; margin-bottom: 1rem; }
.mp-page .mp-hero h1 span { color: var(--mp-accent); }
.mp-page .mp-hero p { color: #fff; font-size: 17px; line-height: 1.6; }
.mp-page .mp-hero .mp-hero-price { font-weight: 700; margin-bottom: 1.25rem; }
.mp-hero-price strong { font-size: 38px; font-weight: 900; line-height: 1; }
.mp-hero-buttons .btn { font-family: "Raleway", sans-serif; font-weight: 800; font-size: 14px; padding: .75rem 1.4rem; margin: 0 .6rem .6rem 0; }
.mp-page .mp-hero .mp-hero-note { font-size: 12px; opacity: .75; margin: .5rem 0 0; }
.mp-hero-img { border-radius: 4px; width: 100%; }

/* Stats bar */
.mp-stats { margin-top: -3.25rem; position: relative; z-index: 2; }
.mp-stats-bar { display: flex; background: var(--mp-blue); box-shadow: 0 10px 30px rgba(0, 0, 0, .18); }
.mp-stat { flex: 1; text-align: center; color: #fff; padding: 1.1rem .5rem; border-left: 1px solid rgba(255, 255, 255, .18); }
.mp-stat:first-child { border-left: 0; }
.mp-stat strong { display: block; font: 900 26px/1.1 "Raleway", sans-serif; }
.mp-stat span { display: block; font-size: 12px; font-weight: 600; }

/* Sections */
.mp-section { padding: 4rem 0; }
.mp-section--gray { background: var(--mp-gray); }
.mp-page h2.mp-title { color: var(--mp-dark); font-size: 36px; line-height: 1.2; font-weight: 900; text-align: center; margin-bottom: .5rem; }
.mp-page h2.mp-title--left { text-align: left; }
.mp-page h2.mp-title--light { color: #fff; }
.mp-page .mp-lead { text-align: center; font-size: 15px; line-height: 1.6; color: var(--mp-muted); max-width: 640px; margin: 0 auto 2.25rem; }
.mp-page .mp-lead--left { text-align: left; margin-left: 0; }

/* Visit cards */
.mp-visit { height: 100%; padding: 1.5rem; border: 1px solid; }
.mp-visit--heating { background: #fdf0f0; border-color: #f3c9c9; }
.mp-visit--cooling { background: #eef4fc; border-color: #c9dcf3; }
.mp-visit-head { display: flex; align-items: center; margin-bottom: 1rem; }
.mp-visit-icon { flex: 0 0 44px; width: 44px; height: 44px; border-radius: 50%; display: flex; align-items: center; justify-content: center; color: #fff; font-size: 18px; margin-right: .9rem; }
.mp-visit--heating .mp-visit-icon { background: var(--mp-red); }
.mp-visit--cooling .mp-visit-icon { background: var(--mp-blue); }
.mp-visit-eyebrow { display: block; font-size: 11px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; }
.mp-visit--heating .mp-visit-eyebrow { color: var(--mp-red); }
.mp-visit--cooling .mp-visit-eyebrow { color: var(--mp-blue); }
.mp-page .mp-visit h3 { color: var(--mp-dark); font-size: 20px; line-height: 1.2; font-weight: 900; margin: 0; }
.mp-visit-sub { display: block; font-size: 13px; color: var(--mp-dark); margin-bottom: .5rem; }
.mp-page .mp-visit p { font-size: 14px; line-height: 1.6; color: var(--mp-muted); margin: 0; }

/* Include cards + checklists */
.mp-card { height: 100%; background: #fff; border-top: 4px solid var(--mp-blue); padding: 1.5rem; box-shadow: 0 4px 16px rgba(0, 0, 0, .08); }
.mp-page .mp-card h3 { color: var(--mp-dark); font-size: 18px; line-height: 1.25; font-weight: 900; margin-bottom: 1rem; }
.mp-checklist { margin: 0; padding: 0; }
.mp-checklist li { position: relative; padding-left: 1.6rem; margin-bottom: .6rem; font-size: 14px; line-height: 1.5; color: var(--mp-dark); }
.mp-checklist li i { position: absolute; left: 0; top: .2rem; color: var(--mp-green); font-size: 13px; }

/* Compare table */
.mp-table { width: 100%; border-collapse: collapse; font-size: 14px; }
.mp-table th, .mp-table td { padding: .8rem .9rem; border: 1px solid var(--mp-line); vertical-align: middle; }
.mp-table thead th { background: #f4f5f7; font-size: 12px; font-weight: 800; color: var(--mp-dark); }
.mp-table thead th.is-member { background: var(--mp-blue); color: #fff; }
.mp-table tbody th { width: 34%; text-align: left; font-weight: 800; color: var(--mp-dark); }
.mp-table td { color: var(--mp-muted); }
.mp-table td.is-member { background: #eef4fc; color: var(--mp-blue); font-weight: 800; }

/* Price card */
.mp-price { background: #fff; border: 2px solid var(--mp-blue); box-shadow: 0 10px 30px rgba(0, 0, 0, .12); scroll-margin-top: 120px; }
.mp-price-banner { background: var(--mp-red); color: #fff; text-align: center; font-size: 11px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; padding: .55rem; }
.mp-price-body { padding: 1.75rem; text-align: center; }
.mp-page .mp-price-body h3 { color: var(--mp-dark); font-size: 18px; font-weight: 900; margin-bottom: .75rem; }
.mp-price-label { display: block; font-size: 11px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--mp-muted); }
.mp-price-amount { font: 900 56px/1.1 "Raleway", sans-serif; color: var(--mp-blue); }
.mp-price-amount sup { font-size: 26px; top: -.7em; }
.mp-price-amount small { font-size: 18px; font-weight: 800; }
.mp-page .mp-price-text { font-size: 13px; line-height: 1.5; color: var(--mp-muted); border-bottom: 1px solid var(--mp-line); padding-bottom: 1rem; margin-bottom: 1rem; }
.mp-price .mp-checklist { text-align: left; margin-bottom: 1.25rem; }
.mp-price .btn { font-family: "Raleway", sans-serif; font-weight: 800; font-size: 14px; padding: .85rem 1rem; }
.mp-price-call { display: block; margin-top: .9rem; font-size: 18px; font-weight: 800; }

/* Protect */
.mp-protect { background: var(--mp-dark); padding: 3.5rem 0; }
.mp-protect .mp-title { margin-bottom: 2rem; }
.mp-protect-grid { display: flex; flex-wrap: wrap; justify-content: center; }
.mp-protect-item { flex: 1 1 18%; min-width: 150px; text-align: center; padding: 0 .75rem 1rem; color: #fff; }
.mp-protect-item i { display: block; font-size: 30px; color: var(--mp-accent); margin-bottom: .6rem; }
.mp-protect-item span { display: block; font-size: 13px; font-weight: 700; line-height: 1.4; }

/* FAQ */
.mp-faq-item { border-bottom: 1px solid var(--mp-line); padding: 1.25rem 0; }
.mp-page .mp-faq-item h3 { color: var(--mp-dark); font-size: 16px; font-weight: 900; margin-bottom: .5rem; }
.mp-page .mp-faq-item p { font-size: 14px; line-height: 1.6; color: var(--mp-muted); margin: 0; }
.mp-cta { background: var(--mp-blue); padding: 2rem; }
.mp-page .mp-cta h3 { color: #fff; font-size: 26px; line-height: 1.2; font-weight: 900; }
.mp-page .mp-cta p { color: #fff; font-size: 14px; margin-bottom: 1.25rem; }
.mp-cta .btn { font-family: "Raleway", sans-serif; font-weight: 800; padding: .85rem 1rem; }
.mp-page .mp-footnote { border-top: 1px solid var(--mp-line); margin: 3rem 0 0; padding-top: 1.25rem; font-size: 12px; line-height: 1.6; color: var(--mp-muted); }

/* Desktop: the header's wave artwork (.desktop-header::after) overlays the top of the
   page, so push hero content below it. Adjust to taste. */
@media (min-width: 992px) {
  .mp-hero { padding-top: 12rem; } }

/* Mobile */
@media (max-width: 767px) {
  .mp-hero { padding: 2.5rem 0 5.5rem; }
  .mp-page .mp-hero h1 { font-size: 34px; }
  .mp-stats-bar { flex-wrap: wrap; }
  .mp-stat { flex: 0 0 50%; border-left: 0; border-top: 1px solid rgba(255, 255, 255, .18); }
  .mp-stat:last-child { flex-basis: 100%; }
  .mp-section { padding: 2.5rem 0; }
  .mp-page h2.mp-title { font-size: 28px; } }