@charset "utf-8";
/* WMG Wealth Club landing page — patterns not already covered by
   font-formatting.css / whatwedo.css / about.css / homepage.css.
   Follows the site's existing mobile-first convention (5%/7.5% side
   margins, #352b29 / #bc805e / #f4e0d4 / #262626 palette). */

/* Accordion (css/homepage.css) is written against CSS custom properties
   that only css/base.css defines — and base.css isn't loaded on this page
   (it belongs to a separate, unused redesign). Defining the same variable
   names here with the site's real brand colors makes the existing
   accordion component render correctly without touching homepage.css. */
:root {
  --color-white: #ffffff;
  --color-gray-light: #f4e0d4;
  --color-gray-dark: #606060;
  --color-dark: #352b29;
  --color-primary: #bc805e;
  --color-cream: #f4e0d4;
  --transition-base: .3s ease;
  --transition-smooth: .5s ease;
}

/* ---------- Hero extras (eyebrow, secondary button, trust microcopy) ---------- */
.wc-eyebrow {
  display: block;
  font-family: 'GeneralSans-Semibold', sans-serif;
  font-size: .85em;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: #bc805e;
  margin: 0 0 .75em;
}

.wc-hero-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 1em;
  margin: 1.5em 0 1em;
}

.wc-hero-buttons a { text-decoration: none; }

button.wc-btn-outline {
  background-color: transparent;
  color: #352b29;
  border: 1.5px solid #352b29;
}

button.wc-btn-outline i, button.wc-btn-outline svg .st0 { fill: #352b29; color: #352b29; }

.wc-trust {
  font-family: 'GeneralSans-Medium', sans-serif;
  font-size: .85em;
  color: #606060;
  margin: 0;
}

/* ---------- Old vs New comparison table ---------- */
.wc-compare {
  width: 90%;
  margin: 2vh 5% 5vh;
  display: block;
  float: left;
  border-radius: 1.5em;
  overflow: hidden;
  border: 1px solid #f4e0d4;
}

.wc-compare-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
}

.wc-compare-row + .wc-compare-row { border-top: 1px solid #f4e0d4; }

.wc-compare-row.wc-compare-head {
  font-family: 'GeneralSans-Semibold', sans-serif;
  color: #fff;
}

.wc-compare-head .wc-compare-old { background-color: #7a6f6a; }
.wc-compare-head .wc-compare-new { background-color: #352b29; }

.wc-compare-old, .wc-compare-new {
  padding: 1em 1.5em;
  font-family: 'GeneralSans-Medium', sans-serif;
}

.wc-compare-old { color: #a39c98; background-color: #f8f8f8; }
.wc-compare-new { color: #352b29; background-color: #fff; font-family: 'GeneralSans-Semibold', sans-serif; }

/* ---------- Card content helpers for reused .list-of-activities grid ---------- */
.list-of-activities ul li h5 {
  margin: 0 0 .4em;
  color: #352b29;
}

.list-of-activities ul li p {
  font-size: .85em;
  line-height: 1.35em;
  color: #606060;
  font-family: 'GeneralSans-Regular', sans-serif;
}

/* ---------- Grouped feature lists (What's Included / Membership Mark) ---------- */
.wc-feature-groups {
  width: 90%;
  margin: 2vh 5% 5vh;
  display: grid;
  grid-template-columns: 1fr;
  gap: 2em;
  float: left;
}

.wc-feature-group h3 {
  margin: 0 0 .6em;
  color: #352b29;
  font-size: 1.4em;
}

.wc-feature-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.wc-feature-list li {
  position: relative;
  padding-left: 1.3em;
  margin-bottom: .6em;
  font-family: 'GeneralSans-Regular', sans-serif;
  color: #352b29;
  line-height: 1.4em;
}

.wc-feature-list li::before {
  content: '\2014';
  position: absolute;
  left: 0;
  color: #bc805e;
}

/* ---------- Membership options (two cards) ---------- */
.wc-options {
  width: 90%;
  margin: 2vh 5% 5vh;
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.5em;
}

.wc-option-card {
  background-color: #fff;
  border: 1px solid #f4e0d4;
  border-radius: 1.5em;
  padding: 2em;
}

.wc-option-card h4 { margin: 0 0 .5em; color: #352b29; }
.wc-option-card p { margin: 0; color: #606060; }
.wc-option-card .wc-option-price {
  display: block;
  margin-top: 1em;
  font-family: 'GeneralSans-Semibold', sans-serif;
  color: #bc805e;
}

/* ---------- Closing CTA banner ---------- */
.wc-cta-banner {
  width: 90%;
  margin: 5vh 5% 5vh;
  padding: 4em 2em;
  background-color: #352b29;
  border-radius: 1.5em;
  text-align: center;
  display: block;
  float: left;
}

.wc-cta-banner h2 {
  color: #fff;
  letter-spacing: 1px;
  font-size: 1.4em;
  margin: 0 0 1em;
}

.wc-cta-banner p {
  color: #f4e0d4;
  font-family: 'PF Regal Display Pro Italic', Georgia, serif;
  font-size: 1.2em;
  max-width: 44em;
  margin: 0 auto 1.5em;
}

.wc-cta-banner .big-button {
  max-width: 20em;
  margin: 0 auto;
  display: flex;
}

.wc-cta-contact {
  color: #f4e0d4cc;
  font-size: .9em;
  margin-top: 1.5em;
}

.wc-cta-contact a { color: #f4e0d4; }

/* ---------- FAQ section wrapper ---------- */
.wc-faq {
  width: 90%;
  margin: 2vh 5% 8vh;
  display: block;
  float: left;
}

.wc-faq .accordion { background-color: #fff; }
.wc-faq .accordion-header h4 { font-family: 'GeneralSans-Semibold', sans-serif; }
.wc-faq .accordion-content { font-family: 'GeneralSans-Regular', sans-serif; }

/* ---------- Second use of the #pillars layout (about.css) on one page:
   reuse its exact rules via a class so we don't duplicate the #pillars id. ---------- */
.wc-pillars-section {
  width: 90%;
  height: auto;
  display: block;
  float: left;
  clear: none;
  position: relative;
  margin: 10vh 5% 10vh;
}

@media only screen and (min-width: 769px) {
  .wc-pillars-section { margin: 10vh 7.5%; }
}

/* ---------- Responsive ---------- */
@media only screen and (min-width: 769px) {
  .wc-compare { width: 85%; margin: 2vh 7.5% 8vh; }
  .wc-options { width: 85%; margin: 2vh 7.5% 8vh; grid-template-columns: 1fr 1fr; }
  .wc-cta-banner { width: 85%; margin: 8vh 7.5%; padding: 5em 3em; }
  .wc-faq { width: 85%; margin: 2vh 7.5% 10vh; }
  .wc-feature-groups { width: 85%; margin: 2vh 7.5% 8vh; grid-template-columns: 1fr 1fr; gap: 2.5em 3em; }
}

@media only screen and (min-width: 1080px) {
  .wc-cta-banner h2 { font-size: 1.8em; }
}