/* Kingdom Stewardship typography for Her Becoming's section headings. */
.becoming-page :is(
  .articles-intro,
  .formation-intro,
  .affirmation-board-copy,
  .library-intro,
  .coach-invite,
  .becoming-close
) h2 {
  font: 500 clamp(35px, 9.2vw, 42px)/.98 "Playfair Display", Georgia, serif !important;
  letter-spacing: -.045em !important;
}

.becoming-page :is(
  .articles-intro,
  .formation-intro,
  .affirmation-board-copy,
  .library-intro,
  .coach-invite,
  .becoming-close
) h2 :is(em, span) {
  font-family: inherit !important;
  font-size: inherit !important;
  font-style: normal !important;
  font-weight: inherit !important;
  line-height: inherit !important;
  letter-spacing: inherit !important;
}

/* Keep each section's established accent color while matching the eyebrow type. */
.becoming-page main .section-label {
  font: 700 11.5px/1.35 "Montserrat", Arial, sans-serif !important;
  letter-spacing: .09em !important;
}

.becoming-page main .section-label::before {
  display: block !important;
}

.becoming-page :is(
  .articles-intro,
  .formation-intro,
  .affirmation-board-copy,
  .coach-invite,
  .becoming-close
) > .section-label {
  margin-bottom: 12px;
}

/* Restore breathing room around the article rail. */
.becoming-page .becoming-articles {
  padding-top: 72px;
  padding-bottom: 28px;
}

.becoming-page .formation-inner {
  padding-top: 56px;
}

  /* Formation reads as an editorial framework rather than a photo-led feature. */
  .becoming-page .formation-map {
    background: #fff;
  }

  .becoming-page .formation-inner {
    padding-top: 44px;
    padding-bottom: 18px;
  }

  .becoming-page .formation-intro {
    margin-bottom: 34px;
  }

  .becoming-page .formation-reflection {
    width: calc(100% + 44px);
    height: 365px;
    margin: 0 -22px;
    overflow: hidden;
    background: #f2eee8;
  }

  .becoming-page .formation-reflection img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: 58% 72%;
  }

  .becoming-page .formation-visual {
    position: relative;
    z-index: 2;
    width: calc(100% - 24px);
    margin: -32px auto 0;
    padding-top: 0;
    border-top: 0;
    box-shadow: 0 12px 28px rgba(38, 31, 27, .13);
  }

  .becoming-page .formation-stops {
    gap: 0;
    grid-template-rows: 86px;
    border-bottom: 1px solid #d5d0ca;
    background: rgba(255, 255, 255, .97);
  }

  .becoming-page .formation-stop {
    padding: 14px 10px 13px;
    border: 0;
    border-right: 1px solid #d5d0ca;
    background: transparent;
  }

  .becoming-page .formation-stop:last-child {
    border-right: 0;
  }

  .becoming-page .formation-stop-number {
    display: block;
    margin-bottom: 8px;
    color: #8a827b;
    font: 700 10px/1 Arial, sans-serif;
    letter-spacing: .12em;
  }

  .becoming-page .formation-stop .formation-stop-label {
    color: #282421;
    font: 500 clamp(19px, 5vw, 23px)/1 "Playfair Display", Georgia, serif;
  }

  .becoming-page .formation-stop.is-active {
    border-color: #d5d0ca;
    background: #344f4a;
  }

  .becoming-page .formation-stop.is-active::after {
    display: none;
  }

  .becoming-page .formation-stop.is-active .formation-stop-number,
  .becoming-page .formation-stop.is-active .formation-stop-label {
    color: #fff;
  }

  .becoming-page .formation-panels {
    margin-top: 0;
    border: 0;
    border-bottom: 1px solid #bcb5ae;
    background: #f7f5f2;
    box-shadow: 0 12px 28px rgba(38, 31, 27, .07);
  }

  .becoming-page .formation-panel {
    padding: 24px 18px 10px;
  }

  /* A magazine-index treatment keeps Formation visual without changing the page's mood. */
  .becoming-page .formation-visual {
    width: calc(100% + 44px);
    margin: 0 -22px;
    box-shadow: none;
  }

  .becoming-page .formation-stops {
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: repeat(3, 82px);
    gap: 0;
    border-top: 1px solid #bdb7b0;
    border-bottom: 1px solid #bdb7b0;
    background: #fff;
  }

  .becoming-page .formation-stop,
  .becoming-page .formation-stop:first-child {
    display: grid;
    grid-template-columns: 78px minmax(0, 1fr);
    align-items: center;
    min-height: 82px;
    padding: 0 22px;
    border: 0;
    border-bottom: 1px solid #ded9d4;
    background: #fff;
    text-align: left;
  }

  .becoming-page .formation-stop:last-child {
    border: 0;
  }

  .becoming-page .formation-stop-number {
    display: block;
    margin: 0;
    color: #c9c2bb;
    font: 400 42px/.8 "Playfair Display", Georgia, serif;
    letter-spacing: -.05em;
  }

  .becoming-page .formation-stop .formation-stop-label {
    color: #282421;
    font: 500 29px/1 "Playfair Display", Georgia, serif;
    letter-spacing: -.035em;
  }

  .becoming-page .formation-stop.is-active {
    border-color: #ded9d4;
    background: #f5f1ed;
    box-shadow: inset 4px 0 0 #7b3f2d;
  }

  .becoming-page .formation-stop.is-active .formation-stop-number,
  .becoming-page .formation-stop.is-active .formation-stop-label {
    color: #7b3f2d;
  }

  .becoming-page .formation-panels {
    width: calc(100% + 44px);
    margin: 0 -22px;
    border: 0;
    background: #fff;
    box-shadow: none;
  }

  .becoming-page .formation-panel {
    padding: 28px 22px 4px 34px;
    border-left: 4px solid #7b3f2d;
  }

  /* Final Formation composition: natural photograph, no overlay, no overlap. */
  .becoming-page .formation-reflection {
    width: calc(100% + 44px);
    height: auto;
    margin: 0 -22px;
    overflow: hidden;
    background: #fff;
  }

  .becoming-page .formation-reflection img {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 3 / 2;
    object-fit: cover;
    object-position: center;
  }

  .becoming-page .formation-visual {
    width: calc(100% + 44px);
    margin: 0 -22px;
    border-top: 1px solid #bdb7b0;
  }

  .becoming-page .formation-stops {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    grid-template-rows: 84px;
    border-top: 0;
    border-bottom: 1px solid #bdb7b0;
  }

  .becoming-page .formation-stop,
  .becoming-page .formation-stop:first-child {
    display: flex;
    min-height: 84px;
    padding: 13px 12px;
    border: 0;
    border-right: 1px solid #d8d3ce;
    border-bottom: 0;
    background: #fff;
    align-items: flex-start;
    justify-content: center;
  }

  .becoming-page .formation-stop:last-child {
    border-right: 0;
  }

  .becoming-page .formation-stop-number {
    margin: 0 0 7px;
    color: #77706a;
    font: 700 10px/1 Arial, sans-serif;
    letter-spacing: .1em;
  }

  .becoming-page .formation-stop .formation-stop-label {
    color: #282421;
    font: 500 21px/1 "Playfair Display", Georgia, serif;
    letter-spacing: -.025em;
  }

  .becoming-page .formation-stop.is-active {
    border-color: #d8d3ce;
    background: #252b2d;
    box-shadow: none;
  }

  .becoming-page .formation-stop.is-active .formation-stop-number,
  .becoming-page .formation-stop.is-active .formation-stop-label {
    color: #fff;
  }

  .becoming-page .formation-panels {
    width: calc(100% + 44px);
    margin: 0 -22px;
    border-bottom: 1px solid #bdb7b0;
    background: #fff;
  }

  .becoming-page .formation-panel {
    padding: 25px 22px 8px;
    border-left: 0;
  }

  /* The photograph belongs to the section heading, rather than interrupting the map. */
  .becoming-page .formation-heading-media {
    width: 100%;
    margin: 28px 0 0;
  }

  .becoming-page .formation-heading-media img {
    display: block;
    width: 100%;
    height: 245px;
    object-fit: cover;
    object-position: center 45%;
  }

  .becoming-page .formation-map .formation-visual,
  .becoming-page .formation-map .formation-panels {
    width: 100%;
    margin-right: 0;
    margin-left: 0;
  }


  .becoming-page .formation-intro > p:not(.section-label) {
    margin-top: 24px;
  }

/* Close Affirmations with the same quiet sectional rule used elsewhere. */
.becoming-page .affirmation-board {
  border-bottom: 1px solid #d9d2c8;
}

/* Keep the final book row from leaving an oversized white tail. */
.becoming-page .wellness-library {
  padding-bottom: 42px;
}

.becoming-page .episode-collection {
  border-top: 0;
}

/* Give the final support and closing sections room to breathe. */
.becoming-page .coach-invite {
  padding-top: 44px;
  padding-bottom: 46px;
}

.becoming-page .coach-invite .section-label {
  margin-bottom: 16px;
  color: #a9472d;
}

.becoming-page .coach-profile {
  margin-top: 30px;
}

.becoming-page .becoming-close {
  padding-top: 38px;
  padding-bottom: 42px;
}

.becoming-page .becoming-close .section-label {
  margin-bottom: 17px;
  color: #201d1b;
}

.becoming-page .becoming-close .section-label::before {
  display: none !important;
}

.becoming-page .becoming-close h2 em {
  color: #b44716;
  font-family: "Allura", cursive !important;
  font-size: 1.12em !important;
  font-style: normal !important;
  font-weight: 400 !important;
  line-height: 1 !important;
  letter-spacing: 0 !important;
}

/* A more dramatic editorial lead-in for the affirmation cards. */
.becoming-page .affirmation-board {
  --affirmation-accent: #7b3f2d;
  padding-top: 44px;
}

.becoming-page .affirmation-board-copy {
  position: relative;
  display: flex;
  padding: 0 24px 18px;
  overflow: visible;
  flex-direction: column;
  text-align: left;
}

.becoming-page .affirmation-board-copy .section-label {
  order: 1;
  justify-content: flex-start;
  margin-bottom: 25px;
  width: fit-content;
  padding: 9px 14px 8px;
  background: #a6ba11;
  color: #111;
  line-height: 1 !important;
}

.becoming-page .affirmation-board-copy .section-label::before {
  display: none !important;
}

.becoming-page .affirmation-board-copy blockquote {
  position: relative;
  order: 3;
  max-width: 278px;
  margin: 24px 0 0 auto;
  padding: 2px 0 2px 18px;
  border-left: 2px solid var(--affirmation-accent);
  color: #111;
  font: 400 16px/1.55 var(--sans);
  letter-spacing: 0;
  text-align: left;
}

.becoming-page .affirmation-board-copy blockquote::before {
  display: none;
}

.becoming-page .affirmation-board-copy h2 {
  display: grid;
  order: 2;
  width: 100%;
  max-width: 342px;
  margin: 0;
  color: var(--becoming-ink);
  font-size: clamp(55px, 15vw, 62px) !important;
  line-height: .86 !important;
  letter-spacing: -.07em !important;
  white-space: normal;
}

.becoming-page .affirmation-board-copy h2 span,
.becoming-page .affirmation-board-copy h2 strong {
  display: block;
  font: inherit !important;
  letter-spacing: inherit !important;
}

.becoming-page .affirmation-board-copy h2 strong {
  margin-top: 1px;
  padding-left: 64px;
}

.becoming-page .affirmation-board-copy h2::after {
  display: none;
}

.becoming-page .affirmation-board-copy::after {
  display: none;
}

.becoming-page .affirmation-popout {
  position: relative;
  z-index: auto;
  margin-top: 0;
  padding-top: 0;
}