/* Site overrides — loaded after the Webflow theme on every page (see
   partials/analytics.html). Keep this file small: only corrections to
   theme rules that fight the current content, never new components. */

/* The theme title-cases these subtitle slots. Our subtitles are full
   sentences — sentence case per the site voice. */
.memebership_p,
.subscribe_p {
  text-transform: none;
}

/* Section subtitles sit baseline-aligned to the right of their heading.
   Sentence-length subtitles need a width cap so they wrap instead of
   crowding the heading. */
.memebership-title-wrapper .memebership_p,
.susbscribe_title-wrapper .subscribe_p,
.testimonials_title-wrapper .testimonials_p {
  max-width: 34rem;
  text-align: right;
  line-height: 130%;
}

@media (max-width: 767px) {
  .memebership-title-wrapper .memebership_p,
  .susbscribe_title-wrapper .subscribe_p,
  .testimonials_title-wrapper .testimonials_p {
    text-align: left;
  }
}

/* The theme's industries grid is 3 columns, which strands a lone 4th
   card. When a section holds exactly 4 cards, lay them out 2x2 (4-up
   on wide screens) and let the text sit under the title. */
.industries_cards-wrapper:has(> .industries_card:nth-child(4):last-child) {
  grid-template-columns: 1fr 1fr;
}
@media (min-width: 1440px) {
  .industries_cards-wrapper:has(> .industries_card:nth-child(4):last-child) {
    grid-template-columns: 1fr 1fr 1fr 1fr;
  }
}
.industries_cards-wrapper:has(> .industries_card:nth-child(4):last-child) .industries_card {
  grid-row-gap: 24px;
  justify-content: flex-start;
}

/* Membership cards used as risk-reversal / plan cards (no button): pull
   the copy up toward the title instead of pinning it to the card floor.
   Cards with buttons keep the theme's space-between so buttons align. */
.memebership_card:not(:has(.w-button)) {
  justify-content: flex-start;
  grid-row-gap: 20px;
}

/* Program hero video panel: the background-video embed must fill the
   rounded wrapper edge to edge, cover-cropped — otherwise the clip
   letterboxes with white bleed at wide viewports. */
.program-hero .bg-video-wrapper {
  background: #0a0a0a;
}
.program-hero .bg-video-wrapper .w-background-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
.program-hero .bg-video-wrapper video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0; /* the theme buries background videos at -100, behind the panel */
}

/* Value-equation diagram on small screens: drop the floating "=" and
   let the result card take the full row. */
@media (max-width: 720px) {
  .fx-eq > .fx-eq_op { display: none; }
  .fx-eq_result { flex: 1 1 100%; }
}

/* Hero microcopy under the CTA: the risk line is quiet button support
   text, the credentials are a pill strip — neither should read like a
   second headline. */
.hero-risk-line {
  font-size: 0.95rem;
  line-height: 140%;
  color: #6b6b6b;
}
.hero-cred-strip {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.hero-wrapper .hero-cred-strip {
  justify-content: center; /* the homepage hero is center-aligned */
}
.hero-cred-strip span {
  font-size: 0.85rem;
  line-height: 1;
  color: #555;
  background: #fafafa;
  border: 1px solid #e4e4e4;
  border-radius: 100px;
  padding: 8px 16px;
  white-space: nowrap;
}

/* The Webflow membership row never wraps and was built for three cards. The
   homepage Services section has four, which squashes them to ragged widths
   below about 1100px. Wrap to a 2x2 there, then to one column on phones.
   Scoped to #services so other membership rows keep their original layout. */
#services .membership-cards_top {
  flex-wrap: wrap;
}
@media (max-width: 1100px) {
  #services .memebership_card {
    flex: 1 1 calc(50% - 12px);
  }
}
@media (max-width: 640px) {
  #services .memebership_card {
    flex: 1 1 100%;
  }
}