/*
 * About "The problem" — Figma "Website" file, "Pointer - About" 5121:9659,
 * node "section-problem" 5121:9669 (1440 wide). Shared by /about and
 * /vets/about. < 768 is "Pointer - About mobile" 5121:10359; 768–991 has no
 * frame and is ours.
 *
 * Two columns in the 1280 container: the label and a 405 wide headline on the
 * left, a 516 column on the right whose paragraph starts 56 down (level with
 * the headline). 64 above, 80 below.
 *   992–1439 (no frame): the 912 column; the paragraph narrows to 460.
 *   768–991 (no frame): stacked, the paragraph under the headline.
 *   < 768 (Figma 5121:10359): stacked, 16 apart, a 20 headline.
 *
 * Also owns .about-label, the white pill with the orange dot that heads this
 * section and the solution one (about-solution.css), so both pages link this
 * file before that one.
 *
 * Fonts: headline Aeonik Medium (--font-display), the rest Inter.
 */

.about-problem {
  position: relative;
  z-index: 1;
  padding: 64rem 0 80rem;
  background-color: #fff;
  color: #666;
  /* Inter (Figma Typography/font/Primary). The token override, not just
     font-family, is what redirects the Webflow element rules. */
  --_colors---family-paragraph: var(--font-ui);
  font-family: var(--font-ui);
}

/* Section label ----------------------------------------------------------- */

/* Figma "Label" 5121:9672: white, #ebebeb hairline, 6/16/6/12 padding with
   the hairline inside, so 5 vertical with our outside border. Inter Medium
   14/20, #444. */
.about-label {
  display: inline-flex;
  align-items: center;
  gap: 8rem;
  margin: 0;
  padding: 5rem 16rem 5rem 12rem;
  border: 1px solid #ebebeb;
  border-radius: 999px;
  background-color: #fff;
  font-family: var(--font-ui);
  font-size: 14rem;
  line-height: 20rem;
  font-weight: 500;
  color: #444;
  white-space: nowrap;
}

.about-label-dot {
  display: block;
  flex-shrink: 0;
  width: 6rem;
  height: 6rem;
  border-radius: 50%;
  background-color: #ff5900;
}

/* Columns ----------------------------------------------------------------- */

.about-problem .container.about-problem-row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 40rem;
}

.about-problem-title {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 16rem;
  flex: 0 1 405rem;
}

/* Figma: Aeonik Medium 40/48, -1.6px, black */
.about-problem-heading {
  margin: 0;
  font-family: var(--font-display);
  font-size: 40rem;
  line-height: 48rem;
  font-weight: 500;
  letter-spacing: -1.6rem;
  color: #000;
}

/* Figma "Body/M": Inter 16/24, -0.32px, #666; 511.5 wide in a 516 column */
.about-problem-text {
  flex: 0 1 516rem;
  margin: 0;
  padding: 56rem 4.5rem 0 0;
  font-size: 16rem;
  line-height: 24rem;
  font-weight: 400;
  letter-spacing: -0.32rem;
  color: #666;
}

/* ------------------------------------------------------------------ */
/* 992–1439 (no frame): the 912 column                                  */
/* ------------------------------------------------------------------ */

@media screen and (min-width: 992px) and (max-width: 1439px) {
  .about-problem-text {
    flex-basis: 460rem;
  }
}

/* ------------------------------------------------------------------ */
/* < 992 (no frame): stacked                                            */
/* ------------------------------------------------------------------ */

@media screen and (max-width: 991px) {
  .about-problem .container.about-problem-row {
    flex-direction: column;
    gap: 16rem;
  }

  .about-problem-title {
    flex-basis: auto;
    max-width: 405rem;
  }

  .about-problem-text {
    flex-basis: auto;
    padding: 0;
  }
}

/* < 768: Figma "The problem" 5121:10359 (393x358) */
@media screen and (max-width: 767px) {
  .about-problem {
    padding: 64rem 32rem 64rem 24rem;
  }

  .about-problem-title {
    max-width: none;
  }

  /* Figma: Aeonik Medium 20/1.1, black */
  .about-problem-heading {
    font-size: 20rem;
    line-height: 1.1;
    letter-spacing: 0;
  }
}