/* SECTION / Key Specs
   Desktop (Figma 1920 frame, content column 1440 => px / 19.2):
     "Section — Key Specs" 1440x224, white, padding 64 top / 32 bottom,
     16 gap: heading 36/36 700, yellow divider 220x4, body 22/1.25 400.
   Mobile (Figma 402 frame, project convention => px / 3.75):
     402x188, container padding 16, same 16 gap: 28/36, 160x4, 20/28. */

.mspecs {
  background: var(--page-bg);
  color: var(--page-ink);
}

.mspecs__container {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.8333vw; /* 16 */
  padding: 3.3333vw 0 1.6667vw; /* 64 / 32 */
}

.mspecs__title {
  margin: 0;
  font-family: var(--f-bold);
  font-weight: 700;
  font-size: 1.875vw; /* 36 */
  line-height: 1; /* 36 */
  text-align: center;
}

/* Figma "Yellow Accent" 220x4 */
.mspecs__rule {
  display: block;
  width: 11.4583vw; /* 220 */
  height: 0.2083vw; /* 4 */
  background: var(--brand-accent);
}

.mspecs__body {
  margin: 0;
  font-family: var(--f-regular);
  font-weight: 400;
  font-size: 1.1458vw; /* 22 */
  line-height: 1.25;
  text-align: center;
}


/* ============================== MOBILE ============================== */
@media (max-width: 768px) {

  .mspecs__container,
  .mobile .mspecs__container {
    gap: 4.2667vw; /* 16 */
    padding: 4.2667vw var(--gutter); /* 16 */
  }

  .mspecs__title,
  .mobile .mspecs__title {
    font-size: 7.4667vw; /* 28 */
    line-height: 1.2857; /* 36 */
  }

  .mspecs__rule,
  .mobile .mspecs__rule {
    width: 42.6667vw; /* 160 */
    height: 1.0667vw; /* 4 */
  }

  .mspecs__body,
  .mobile .mspecs__body {
    font-size: 5.3333vw; /* 20 */
    line-height: 1.4; /* 28 */
  }

  /* the desktop frame breaks the paragraph in two; mobile lets it wrap */
  .mspecs__body br,
  .mobile .mspecs__body br {
    display: none;
  }
}