/* =====================
   m_pricing — "Pricing" section.

   Source of truth:
     Desktop (annual): Figma node 4224:3086
     Desktop (monthly content): Figma node 6011:6343
     Mobile:                   Figma node 4253:8236

   Inherits dark BG + vertical-only padding from `.m_feature`.
   Adds:
     - Header max-width override (700 instead of 768)
     - Mobile vertical padding 64px (vs 56 in Problem/Audience)
     - 3-card grid (each spans 4 of 12)
     - Pricing-specific card structure (header / price block / content)
     - PRO card variant with green border + tinted gradient bg
     - Tab toggle (Annual / Monthly) on PRO card (uses `tabs.css`)
     - Bottom CTA centered

   Webflow-friendly: no descendant state selectors, no scroll-vars,
   tab state driven by ARIA + .is-active combo class (see tabs.css).

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

/* ---- Pricing-specific section overrides ---------------------------- */

.m_pricing > .u-container { gap: 4rem; }              /* 64px header→grid */
@media (max-width: 991px) {
  .m_pricing { padding: 4rem 0; }                      /* 64px Y mobile (overrides .m_feature 3.5rem) */
  .m_pricing > .u-container { gap: 3rem; }             /* 48px mobile */
}

/* Header tighter than Audience — Figma 700px max width */
.m_pricing .m_feature_header { max-width: 43.75rem; }  /* 700px */

/* ---- Cards row ----------------------------------------------------- */

.m_pricing_grid {
  width: 100%;
  align-items: stretch;                                  /* equal-height cards */
}
.m_pricing_card { grid-column: span 4; }                /* 3 in row × 12 cols */
@media (max-width: 991px) {
  .m_pricing_card { grid-column: span 12; }
}

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

.m_pricing_card {
  position: relative;
  display: flex;
  flex-direction: column;
  border-radius: 0.75rem;                                /* 12px */
  overflow: clip;
  box-shadow:
    0 12px 16px -4px rgba(16, 24, 40, 0.08),
    0 4px 6px -2px rgba(16, 24, 40, 0.03);
}

.m_pricing_card_header,
.m_pricing_card_content {
  background-color: rgba(43, 43, 43, 0.7);
  position: relative;
}
.m_pricing_card_header {
  padding: 2rem 2rem 0;                                  /* 32px top, 32px X, 0 bottom */
}
.m_pricing_card_content {
  padding: 2rem;                                          /* 32px all */
  flex: 1 1 auto;                                         /* fill remaining height */
}
@media (max-width: 991px) {
  .m_pricing_card_header  { padding: 1.5rem 1.5rem 0; }   /* 24px */
  .m_pricing_card_content { padding: 1.5rem; padding-bottom: 2rem; }
}

/* PRO card variant — green border + green-tint overlay over the card bg */
.m_pricing_card.is-pro {
  border: 1px solid var(--color--main-green, #90F99C);
}
.m_pricing_card.is-pro .m_pricing_card_header,
.m_pricing_card.is-pro .m_pricing_card_content {
  /* Stack two layers: faint green tint + base card bg */
  background-image:
    linear-gradient(rgba(144, 249, 156, 0.05), rgba(144, 249, 156, 0.05)),
    linear-gradient(rgba(43, 43, 43, 0.7), rgba(43, 43, 43, 0.7));
  background-color: transparent;
}

/* ---- Card header inner layout -------------------------------------- */

.m_pricing_card_header_row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  width: 100%;
  min-height: 2.5rem;                                    /* 40px to match Figma "Heading and icon" h-40 */
}

.m_pricing_card_title {
  margin: 0;
  font-family: "Inter", sans-serif;
  font-weight: 600;                                      /* SemiBold */
  font-size: 1.25rem;                                    /* 20px */
  line-height: 1.5;                                      /* 30/20 */
  color: var(--color--main-green, #90F99C);
}

.m_pricing_card_price_block {
  display: flex;
  flex-direction: column;
  gap: 0.125rem;                                         /* 2px between price and note */
  margin-top: 1rem;                                      /* 16px below header row */
  color: var(--color--white, #ffffff);
  width: 100%;
}
/* Boost specificity so the [hidden] HTML attribute wins over the class
   declaration above (UA `[hidden] { display: none }` only has attribute
   specificity = 1,0,0 and loses to `.m_pricing_card_price_block` flex). */
.m_pricing_card_price_block[hidden],
.m_pricing_features[hidden] { display: none; }

.m_pricing_card_price {
  margin: 0;
  font-family: "Inter", sans-serif;
  font-weight: 600;                                      /* SemiBold */
  font-size: 3rem;                                       /* 48px desktop */
  line-height: 1.25;                                     /* 60/48 */
  letter-spacing: -0.02em;
}
@media (max-width: 991px) {
  .m_pricing_card_price {
    font-size: 2.25rem;                                  /* 36px mobile */
    line-height: 1.05;
    letter-spacing: -0.02em;
  }
}

/* "/mth" suffix inside the price line — smaller, Medium */
.m_pricing_card_price_suffix {
  font-weight: 500;
  font-size: 1.875rem;                                   /* 30px desktop */
  line-height: 1.2667;
}
@media (max-width: 991px) {
  .m_pricing_card_price_suffix {
    font-size: 1.5rem;                                   /* 24px mobile */
    line-height: 1.3333;
  }
}

.m_pricing_card_price_note {
  margin: 0;
  font-family: "Inter", sans-serif;
  font-weight: 500;
  font-size: 0.875rem;                                   /* 14px */
  line-height: 1.4286;                                   /* 20/14 */
  color: rgba(255, 255, 255, 0.7);
}
.m_pricing_card_price_note strong {
  font-weight: 700;
}

/* ---- Features list ------------------------------------------------- */

.m_pricing_features {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 1rem;                                              /* 16px */
  width: 100%;
}

.m_pricing_feature {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;                                           /* 12px */
}

/* Round check icon container — 24×24, light-green tinted bg */
.m_pricing_feature_check {
  flex-shrink: 0;
  width: 1.5rem;                                          /* 24px */
  height: 1.5rem;
  border-radius: 50%;
  background-color: rgba(144, 249, 156, 0.1);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color--main-green, #90F99C);
}
.m_pricing_feature_check svg {
  width: 0.75rem;                                         /* 12px svg inside 24px box */
  height: 0.625rem;
  display: block;
  overflow: visible;
}

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

/* ---- Bottom CTA ---------------------------------------------------- */

.m_pricing_cta {
  display: flex;
  justify-content: center;
  width: 100%;
}