/*!
 * Monal Group — monal-story-belief
 *
 * Converted from design/pages.css (the approved HTML prototype).
 * Desktop values come straight from Figma 329:3455: every length is
 * Figma px / 10 expressed in --monal-u.
 */

/* ==========================================================================
   STORY — belief   329:3455
   ========================================================================== */
/* The last section before the footer, so it also carries the page gap
   beneath it; the footer adds only its own 1u. */
.monal-story-belief { position: relative; padding: var(--monal-page-gap) 0; text-align: center; }
.monal-story-belief__lead { max-width: calc(var(--monal-u) * 101.46); margin-inline: auto; }
.monal-story-belief__lead strong { display: block; font-weight: 600; color: var(--monal-c-ink); }
.monal-story-belief__lead p { margin-top: calc(var(--monal-u) * .8); }
/* The three pills need ~470px in a row, so on phones the row wrapped and the
   third pill opened its line with an orphaned divider. Phones stack them and
   turn the divider into a short horizontal rule; 768 up keeps the row. */
.monal-story-belief__pills {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: calc(var(--monal-u) * 2);
  margin-top: calc(var(--monal-u) * 2.4);
  list-style: none;
}
.monal-story-belief__pills li {
  position: relative;
  font-weight: 500; font-size: max(calc(var(--monal-u) * 1.3), 12px); line-height: 1.3;
  text-transform: uppercase; color: var(--monal-c-ink);
}
.monal-story-belief__pills li + li::before {
  content: ""; position: absolute; left: 50%; top: calc(var(--monal-u) * -1);
  width: calc(var(--monal-u) * 1.7); height: 1px;
  transform: translateX(-50%);
  background: rgba(30, 25, 22, .25);
}
.monal-story-belief__cta { margin-top: calc(var(--monal-u) * 2.8); }

@media (min-width: 768px) {
  .monal-story-belief__pills { flex-direction: row; flex-wrap: wrap; gap: calc(var(--monal-u) * 1.2) calc(var(--monal-u) * 2); }
  .monal-story-belief__pills li + li::before {
    left: calc(var(--monal-u) * -1); top: 50%;
    width: 1px; height: calc(var(--monal-u) * 1.7);
    transform: translateY(-50%);
  }
}

@media (min-width: 1200px) {
  /* Figma band 2292.19 - 2771.42; first line at y2362.2. */
  .monal-story-belief { margin-top: 0; padding-top: calc(var(--monal-u) * 7); padding-bottom: 0; min-height: calc(var(--monal-u) * 47.92); }
  .monal-story-belief__lead p { margin-top: 0; line-height: calc(var(--monal-u) * 3.6); }
  .monal-story-belief__lead strong { line-height: calc(var(--monal-u) * 3.6); }
  .monal-story-belief__pills { gap: calc(var(--monal-u) * 5.2); margin-top: calc(var(--monal-u) * 3); }
  .monal-story-belief__pills li { font-size: calc(var(--monal-u) * 2.2); line-height: calc(var(--monal-u) * 2.8); }
  .monal-story-belief__pills li + li::before { left: calc(var(--monal-u) * -2.6); }
  .monal-story-belief__cta {
    margin-top: calc(var(--monal-u) * 5);
    width: calc(var(--monal-u) * 23.49); padding: 0;
  }
}