/* =====================
   m_feature — shared base for "feature-card" sections.

   Used as a base combo class on Problem / Audience / and any future
   section that follows the pattern:
     - Dark BG section with vertical-only padding
     - Centered header (tag + title + subtitle, max-width 768px)
     - 12-col grid of cards on .u-grid-custom
     - Each card has icon (32×32 with currentColor SVG) + title + body

   Section-specific deltas (container gap, card spans, icon palette
   modifiers) live in m_<section>.css.

   HTML pattern:
     <section class="m_feature m_<section_name>">
       <div class="u-container">
         <div class="m_feature_header">
           <span class="tag_main">…</span>
           <h2 class="u-text-style-h2">…</h2>
           <p class="u-text-style-main" data-text-color="muted">…</p>
         </div>
         <div class="u-grid-custom">
           <div class="m_feature_card is-{color}">
             <div class="m_feature_card_icon">…inline svg…</div>
             <div class="m_feature_card_content">
               <h3 class="m_feature_card_title">…</h3>
               <p class="m_feature_card_text">…</p>
             </div>
           </div>
           …
         </div>
       </div>
     </section>

   Mobile breakpoint: <= 991px.
===================== */

.m_feature {
  background-color: var(--color--bg-main, #131313);
  padding: 5rem 0;                      /* 80px Y desktop */
  color: var(--color--white, #ffffff);
  font-family: "Inter", sans-serif;
}
@media (max-width: 991px) {
  .m_feature { padding: 3.5rem 0; }     /* 56px Y mobile */
}

/* Vertically stack header + grid; container gap is set per-section. */
.m_feature > .u-container {
  align-items: center;
}

/* --- Header block ---------------------------------------------------- */

.m_feature_header {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.25rem;                         /* 20px desktop */
  max-width: 48rem;                     /* 768px */
  width: 100%;
  text-align: center;
}
@media (max-width: 991px) {
  .m_feature_header { gap: 1rem; }      /* 16px mobile */
}

/* Spacing between tag and title — matches Figma "Heading and subheading"
   12px gap inside header block (overrides parent's 20px gap for the
   tag→title pair only). Done with margin-bottom on the tag for simplicity. */
.m_feature_header .tag_main {
  margin-bottom: -0.5rem;               /* 20px - 12px = 8px → tag→title gap is 12px */
}

/* --- Card body ------------------------------------------------------- */

.m_feature_card {
  min-width: 0;
  background-color: var(--color--bg-cards, #242424);
  border-radius: 0.75rem;               /* 12px */
  padding: 2rem;                        /* 32px desktop */
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1.25rem;                         /* 20px between icon and content */
}
@media (max-width: 991px) {
  .m_feature_card {
    background-color: rgba(43, 43, 43, 0.7);
    padding: 1rem;                      /* 16px mobile */
    gap: 1rem;                          /* 16px mobile */
  }
}

/* --- Icon container -------------------------------------------------- */

.m_feature_card_icon {
  width: 2rem;                          /* 32px box */
  height: 2rem;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--icon-color, var(--color--main-green));
  flex-shrink: 0;
}
.m_feature_card_icon svg {
  width: 1.5rem;                        /* 24px Material Symbol render size */
  height: 1.5rem;
  display: block;
  overflow: visible;
}

/* Per-card icon-color modifiers — Webflow-friendly combo classes.
   Each maps to a swatch in the project palette. */
.m_feature_card.is-red    { --icon-color: var(--color--red,    #FF7C7E); }
.m_feature_card.is-orange { --icon-color: var(--color--accent-orange, #F6A272); }
.m_feature_card.is-yellow { --icon-color: var(--color--yellow, #F8F990); }
.m_feature_card.is-green  { --icon-color: var(--color--main-green, #90F99C); }
.m_feature_card.is-blue   { --icon-color: var(--color--blue,   #90E4F9); }
.m_feature_card.is-purple { --icon-color: var(--color--purple, #9590F9); }
.m_feature_card.is-lilac  { --icon-color: var(--color--lilac,  #C390F9); }
.m_feature_card.is-pink   { --icon-color: var(--color--pink,   #F990BF); }

/* --- Card text content ----------------------------------------------- */

.m_feature_card_content {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;                          /* 8px */
  width: 100%;
}

.m_feature_card_title {
  margin: 0;
  font-family: "Inter", sans-serif;
  font-weight: 600;                     /* SemiBold desktop */
  font-size: 1.25rem;                   /* 20px */
  line-height: 1.5;                     /* 30/20 */
  color: var(--color--white, #ffffff);
}
@media (max-width: 991px) {
  .m_feature_card_title {
    font-weight: 500;                   /* Medium mobile */
    font-size: 1.125rem;                /* 18px */
    line-height: 1.5556;                /* 28/18 */
  }
}

.m_feature_card_text {
  margin: 0;
  font-family: "Inter", sans-serif;
  font-weight: 400;
  font-size: 1rem;                      /* 16px both breakpoints */
  line-height: 1.5;                     /* 24/16 */
  color: rgba(255, 255, 255, 0.7);
}