/* cs-steps-cards — "how it works" section with 3 numbered cards + CTA + disclaimer.
   All rem values follow BB Theme's html { font-size: 10px } base — 1.8rem = 18px. */

/* Strip BB's default row top spacing so the section (and its crossing-lines
   decoration) starts exactly where the previous section ends. */
.fl-row-content-wrap:has(.cs-steps-cards) {
  padding-top: 0;
}
.fl-module-content:has(.cs-steps-cards) {
  margin-top: 0;
}

.cs-steps-cards {
  padding-block: var(--cs-space-2xl);
  font-family: var(--cs-font-body);
  color: var(--cs-ink);
}

/* When the crossing-lines decoration is on, give the lines extra headroom —
   ~144px between the previous section's edge and the eyebrow per Figma. */
.cs-steps-cards[class*="cs-decor-lines"] {
  padding-top: 14.4rem;
}

/* When the section directly follows a content-icons row, drop its own top
   padding — the previous section's bottom padding alone gives the ~90px gap
   the Figma couples-therapy layout shows. */
.fl-row:has(.cs-content-icons) + .fl-row .cs-steps-cards:not([class*="cs-decor-lines"]) {
  padding-top: 0;
}

/* Centered warm-duo variant: no top padding of its own — the previous
   section's bottom padding already provides the gap. */
.cs-steps-cards--centered.cs-decor-warm-duo {
  padding-top: 0;
}

.cs-steps-cards__inner {
  max-width: var(--cs-container);
  margin: 0 auto;
  padding-inline: var(--cs-gutter);
}

/* ---------- Header ---------- */
.cs-steps-cards__header {
  text-align: center;
  margin-bottom: var(--cs-space-xl);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--cs-space-sm);
}

.cs-steps-cards__eyebrow {
  margin: 0;
  display: inline-flex;
  align-items: center;
  gap: 1.2rem;
  font-family: var(--cs-font-display);
  font-weight: 500;
  font-size: 2rem; /* 20px */
  line-height: 1.212;
  color: var(--cs-blue);
  text-transform: uppercase;
  letter-spacing: 0.02em;
}

.cs-steps-cards__eyebrow-line {
  display: inline-block;
  width: 4.9rem;
  height: 2px;
  background: currentColor;
}

/* Doubled-up class specificity so the heading survives BB Global Styles'
   `.fl-builder-content h2 / h2 span` color & font rules. */
.cs-steps-cards .cs-steps-cards__heading {
  margin: 0;
  font-family: var(--cs-font-display);
  font-weight: 700;
  font-size: clamp(3.2rem, 4vw + 1rem, 6.4rem); /* 32px → 64px */
  font-style: normal;
  color: var(--cs-ink); /* plain (unaccented) heading text must not inherit the Customizer's #683326 */
  line-height: 1.212;
  letter-spacing: var(--cs-tracking-tight);
  text-wrap: balance;
}

.cs-steps-cards .cs-steps-cards__heading-main {
  color: var(--cs-ink);
}

.cs-steps-cards .cs-steps-cards__heading-accent {
  color: var(--cs-blue);
}

/* Subheading — centered paragraph under the heading */
.cs-steps-cards__subheading {
  margin: 0;
  max-width: 117rem; /* 1171px per Figma */
  font-size: 2rem; /* 20px */
  line-height: 1.5;
  letter-spacing: -0.02em;
  color: var(--cs-ink);
  text-align: center;
}

/* ---------- Cards grid ---------- */
.cs-steps-cards__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--cs-space-lg);
  margin-bottom: var(--cs-space-xl);
}

.cs-steps-cards__card {
  position: relative;
  border-radius: 3.7rem; /* 37px */
  padding: 2.8rem;
  display: flex;
  flex-direction: column;
  min-height: 35.3rem; /* 353px per Figma */
}

/* Card style: blue.
   --cs-blue-card, not --cs-blue: this surface carries white body copy, which
   only reaches 3.90:1 on --cs-blue. See the token for the full reasoning. */
.cs-steps-cards__card--blue {
  background: var(--cs-blue-card);
  color: var(--cs-white);
}
.cs-steps-cards__card--blue .cs-steps-cards__card-number {
  color: var(--cs-blue-pale-40);
}

/* Card style: pale */
.cs-steps-cards__card--pale {
  background: var(--cs-blue-pale);
  color: var(--cs-blue-dark);
}
.cs-steps-cards__card--pale .cs-steps-cards__card-number {
  color: var(--cs-blue-30);
}

/* Card style: warm — solid terracotta card, all-white text. Was a 47%
   orange wash (composite ~#D3A392), but white only reached 2.23:1 there —
   the solid brand orange carries white at 5.13:1 (AA for all text sizes). */
.cs-steps-cards__card--warm {
  background: var(--cs-orange);
  color: var(--cs-white);
}
.cs-steps-cards .cs-steps-cards__card--warm .cs-steps-cards__card-title {
  color: var(--cs-white);
}
.cs-steps-cards__card--warm .cs-steps-cards__card-number {
  color: rgba(255, 255, 255, 0.4);
}

/* Icon — alone in the top-right corner, per Figma */
.cs-steps-cards__card-icon {
  position: absolute;
  top: 2.6rem;
  right: 2.8rem;
  width: 7.2rem;  /* 72px */
  height: 7.2rem;
  object-fit: contain;
}

/* Warm cards: recolor the navy line-art icons white (icons load as <img>,
   so a filter is the only way to repaint them) */
.cs-steps-cards__card--warm .cs-steps-cards__card-icon {
  filter: brightness(0) invert(1);
}

/* Head row: big translucent number + title side by side */
.cs-steps-cards__card-head {
  display: flex;
  align-items: center;
  gap: 2rem;
  margin: 7.2rem 0 2.4rem; /* clears the icon zone; number sits ~100px down per Figma */
}

/* No icon → no icon zone: the head row takes that space, and the card's
   height budget drops by the same 7.2rem so the slack doesn't reappear at the
   bottom (client request 2026-08-25). Selectors kept on ONE line — BB's CSS
   rewrite welds a newline after `)` into a compound selector and the rule
   silently stops matching. */
.cs-steps-cards__card:not(:has(.cs-steps-cards__card-icon)) .cs-steps-cards__card-head {
  margin-top: 0;
}

.cs-steps-cards__card:not(:has(.cs-steps-cards__card-icon)) {
  /* Height fits the content — no fixed floor. Cards in one row still equalize
     via the grid's default stretch, sized by the tallest card's content. */
  min-height: 0;
}

.cs-steps-cards__card-number {
  font-family: var(--cs-font-display);
  font-weight: 800;
  font-size: 6.4rem; /* 64px */
  line-height: 1;
  letter-spacing: var(--cs-tracking-tight);
  flex-shrink: 0;
}

/* Card title — doubled-up so BB Global Styles' h3 rules can't repaint it */
.cs-steps-cards .cs-steps-cards__card-title {
  margin: 0;
  font-family: var(--cs-font-display);
  font-weight: 800;
  font-size: 2.4rem; /* 24px */
  font-style: normal;
  line-height: 1.212;
  letter-spacing: var(--cs-tracking-tight);
  color: inherit;
}

/* Card body — sentence case, not the title case Figma shows. See the same
   note on .cs-promo-banner__body: prose is sentence case sitewide. */
.cs-steps-cards__card-body {
  font-size: 1.8rem; /* 18px */
  line-height: 1.5;
  text-transform: none;
}

.cs-steps-cards__card-body p {
  margin: 0 0 var(--cs-space-sm);
}
.cs-steps-cards__card-body p:last-child {
  margin-bottom: 0;
}

/* Doubled-up classes so links survive BB Global Styles'
   `.fl-builder-content a` / `a:not(...):hover` color rules. */
.cs-steps-cards .cs-steps-cards__card .cs-steps-cards__card-body a,
.cs-steps-cards .cs-steps-cards__card .cs-steps-cards__card-body a:link,
.cs-steps-cards .cs-steps-cards__card .cs-steps-cards__card-body a:visited {
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 3px;
  font-weight: 700;
  transition: opacity 200ms ease;
}
.cs-steps-cards .cs-steps-cards__card .cs-steps-cards__card-body a:hover,
.cs-steps-cards .cs-steps-cards__card .cs-steps-cards__card-body a:focus-visible {
  opacity: 0.8;
  color: inherit;
}

.cs-steps-cards__card-body strong,
.cs-steps-cards__card-body b {
  font-weight: 700;
}

/* ---------- Centered card layout (icon above title, centered text) ---------- */
.cs-steps-cards--centered .cs-steps-cards__card {
  align-items: center;
  text-align: center;
  min-height: 35rem; /* 350px per Figma getting-started */
}

/* Same fit-to-content rule for the centered variant (its floor above outranks
   the generic no-icon rule by source order). ONE line — see BB gotcha above. */
.cs-steps-cards--centered .cs-steps-cards__card:not(:has(.cs-steps-cards__card-icon)) {
  min-height: 0;
}

.cs-steps-cards--centered .cs-steps-cards__card-icon {
  position: static;
  width: 4.6rem; /* 46px glyphs per Figma */
  height: 4.6rem;
  object-fit: contain;
  margin: 1rem auto 0;
}

.cs-steps-cards--centered .cs-steps-cards__card-head {
  justify-content: center;
  margin: 1.6rem 0 2.4rem;
}

.cs-steps-cards--centered .cs-steps-cards__card-title {
  text-transform: uppercase;
}

.cs-steps-cards--centered .cs-steps-cards__card-body {
  font-size: 2rem; /* 20px per Figma */
  text-transform: none;
}

/* ---------- CTA row ---------- */
.cs-steps-cards__cta-row {
  display: flex;
  justify-content: center;
  margin-bottom: var(--cs-space-lg);
}

.cs-steps-cards .cs-steps-cards__cta,
.cs-steps-cards .cs-steps-cards__cta:link,
.cs-steps-cards .cs-steps-cards__cta:visited {
  display: inline-block;
  background: var(--cs-orange);
  color: var(--cs-white);
  font-family: var(--cs-font-display);
  font-weight: 700;
  font-size: 1.8rem; /* 18px */
  line-height: 1.5;
  letter-spacing: -0.02em;
  text-decoration: none;
  text-align: center;
  min-width: min(33rem, 100%); /* 330px per Figma */
  padding: 1rem 3.2rem;
  border-radius: var(--cs-radius-pill);
  transition: background 250ms ease-in-out, color 250ms ease-in-out, box-shadow 250ms ease-in-out, filter 250ms ease-in-out, transform 250ms ease-in-out;
}

.cs-steps-cards .cs-steps-cards__cta.cs-steps-cards__cta:hover,
.cs-steps-cards .cs-steps-cards__cta.cs-steps-cards__cta:focus-visible {
  background: var(--cs-orange);
  color: var(--cs-white);
  /* Smooth highlight: slight brightness lift, soft orange glow, gentle scale */
  filter: brightness(1.08);
  box-shadow: 0 0.8rem 2rem -0.8rem rgba(180, 79, 45, 0.6);
  transform: scale(1.02);
  text-decoration: none;
}

/* ---------- Disclaimer ---------- */
.cs-steps-cards__disclaimer {
  max-width: 107.6rem; /* 1076px per Figma */
  margin: 0 auto;
  text-align: center;
  font-size: 1.2rem; /* 12px */
  line-height: 1.5;
  letter-spacing: -0.02em;
  color: var(--cs-blue-dark);
  text-transform: uppercase;
}

.cs-steps-cards__disclaimer p {
  margin: 0;
}

.cs-steps-cards__disclaimer a {
  color: var(--cs-blue-dark);
  text-decoration: underline;
  text-underline-offset: 2px;
  font-weight: 500;
}
.cs-steps-cards__disclaimer a:hover,
.cs-steps-cards__disclaimer a:focus-visible {
  color: var(--cs-blue);
}

/* ---------- Visually hidden helper (for screen-reader step announcement) ---------- */
.cs-visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* ---------- Responsive ---------- */
@media (max-width: 1024px) {
  .cs-steps-cards {
    padding-block: var(--cs-space-section-sm);
  }
  .cs-steps-cards__grid {
    gap: var(--cs-space-md);
  }
  .cs-steps-cards__card {
    padding: 2.4rem;
  }
}

@media (max-width: 768px) {
  /* When the CTA row is the section's LAST element its trailing 40px margin
     stacked onto the section padding and read as a lopsided seam before the
     next section (client-spotted on the Individual page, 2026-09-15). When a
     disclaimer follows, the margin is the CTA↔disclaimer gap and stays. */
  .cs-steps-cards__cta-row:last-child {
    margin-bottom: 0;
  }
  .cs-steps-cards__grid {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--cs-space-md);
  }
  .cs-steps-cards__card {
    min-height: 0;
  }
  .cs-steps-cards .cs-steps-cards__cta {
    width: 100%;
    text-align: center;
    /* This CTA's container runs ~40px narrower than the other consultation
       pills' — with the desktop 32px side padding the label sat exactly at
       the wrap threshold and broke into two lines on some devices. Slimmer
       sides keep it one line, matching the other buttons. */
    padding-inline: 1.6rem;
  }
}