/* ==========================================================================
   KOBIL — Company — Section: Gartner
   Figma D-Company 5882:51166 (frame named "mpower", 1280x471 — eyebrow at
   40/104, H2 column 532 wide at 40/187, hype-cycle column 598 wide at 587/187,
   one big blurred vector bleeding in from the left) ·
   M-Company 5882:51465 (345x379 — stacked, H2 28/36, wordmark 108).
   The glow is baked in as a PNG (flattened onto white, 1218x1510); in Figma it
   runs far past the section, so overflow:clip crops it the same way.
   ========================================================================== */

.sec-company-gartner {
  position: relative;
  isolation: isolate;
  background: var(--white);
  overflow: clip;
}

.sec-company-gartner__inner {
  position: relative;
  padding: var(--w104) var(--w40) var(--w162);
}

/* ---- Decorative glow (behind the content, above the white section area) ---- */

.sec-company-gartner__glow {
  position: absolute;
  z-index: -1;
  left: 0;
  top: calc(-1 * var(--w584));
  width: var(--w1218);
  height: var(--w1510);
  max-width: none;
  pointer-events: none;
  user-select: none;
}

/* ---- Eyebrow (Figma tag: IBM Plex Mono 12/18, tracking 0.48) ---- */

.sec-company-gartner__eyebrow {
  font-family: var(--font-mono);
  font-size: var(--w12);
  font-weight: 500;
  line-height: var(--w18);
  letter-spacing: 0.48px;
  text-transform: uppercase;
  color: var(--navy-70);
  /* Figma's `tag` is a cap-trimmed 8px box, so its 12/18 line box is 5px
     taller on each side. Pulling those back in keeps every y below it on
     the frame's own numbers. */
  margin-block: calc(-1 * var(--w5));
}

/* ---- Two columns: H2 on the left (532), list on the right (598, gap 15) ---- */

.sec-company-gartner__columns {
  margin-top: var(--w75);
  display: flex;
  align-items: flex-start;
  gap: var(--w15);
}

.sec-company-gartner__title {
  flex: 0 1 var(--w532);
  font-family: var(--font-sans);
  font-size: var(--w40);
  font-weight: 700;
  line-height: var(--w50);
  color: var(--navy);
}

/* Wordmark sits in Figma at x=189 / y=56 (box 50..100) of the title line */
.sec-company-gartner__wordmark {
  display: inline-block;
  width: var(--w164);
  height: auto;
  margin-left: var(--w5);
  vertical-align: -5px;
}

/* ---- Right column: intro + hype-cycle list (body L, System/80%) ---- */

.sec-company-gartner__right {
  flex: 0 1 var(--w598);
  display: flex;
  flex-direction: column;
  gap: var(--w6);
}

.sec-company-gartner__intro {
  font-family: var(--font-sans);
  font-size: var(--w18);
  line-height: var(--w26);
  color: var(--navy-80);
}

.sec-company-gartner__intro strong {
  font-weight: 600;
}

.sec-company-gartner__domains {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  column-gap: var(--w10);
  row-gap: var(--w6);
  font-family: var(--font-sans);
  font-size: var(--w18);
  line-height: var(--w26);
  color: var(--navy-80);
}

/* "In-App Protection" fills the remaining line — forces "Building …" to line 3 */
.sec-company-gartner__item--grow {
  flex: 1 0 0;
  min-width: 1px;
}

.sec-company-gartner__dot {
  flex: 0 0 auto;
  width: var(--w5);
  height: var(--w5);
  border-radius: 50%;
  background: var(--navy);
}

/* ---- Phone (Figma 5882:51465: 60/16 padding, H2 28/36, wordmark 108) ---- */

@media (max-width: 768px) {
  .sec-company-gartner__inner {
    padding: var(--m60) var(--m16);
  }

  /* Glow in the phone frame: half scale, centred near the top edge */
  .sec-company-gartner__glow {
    left: 50%;
    top: calc(-1 * var(--m310));
    width: var(--m613);
    height: var(--m760);
    transform: translateX(-50%);
  }

  .sec-company-gartner__eyebrow {
    font-size: var(--m12);
    line-height: var(--m18);
    margin-block: calc(-1 * var(--m5));
  }

  .sec-company-gartner__columns {
    margin-top: var(--m24);
    flex-direction: column;
    align-items: stretch;
    gap: var(--m16);
  }

  .sec-company-gartner__title {
    flex: none;
    font-size: var(--m28);
    line-height: var(--m36);
  }

  .sec-company-gartner__br {
    display: none;
  }

  .sec-company-gartner__wordmark {
    width: var(--m108);
    margin-left: var(--m4);
    vertical-align: -4px;
  }

  .sec-company-gartner__right {
    flex: none;
  }

  .sec-company-gartner__intro,
  .sec-company-gartner__domains {
    font-size: var(--m14);
    line-height: var(--m22);
    color: var(--navy-70);
  }

  .sec-company-gartner__domains {
    column-gap: var(--m6);
    row-gap: 0;
  }

  .sec-company-gartner__item--grow {
    flex: 0 0 auto;
    min-width: 0;
  }

  .sec-company-gartner__dot {
    width: var(--m3);
    height: var(--m3);
  }
}