/* v2.4: refinements arising from the complete desktop screenshot review. */

/* Give the fixed banner the same curve on every corner. */
body .site-header {
  border-radius: 6px;
}

/* The final destination is now the contact page. */
body .site-header .nav-cta {
  min-width: 78px;
  text-align: center;
}

/* Make the smaller application captures occupy more of their visual panels. */
body main .capability-visual.portrait {
  padding: 4px;
}

body main .capability-visual.portrait img {
  max-height: 220px;
}

/* AI captures are larger in-page and selectable at their original resolution. */
body main a.ai-result-image {
  color: inherit;
  text-decoration: none;
  cursor: zoom-in;
  transition: background-color 160ms ease;
}

body main a.ai-result-image:hover,
body main a.ai-result-image:focus-visible {
  background: #e7f1f5;
}

body main a.ai-result-image:focus-visible {
  outline: 3px solid #49c9ca;
  outline-offset: -3px;
}

@media (min-width: 901px) {
  /* Connected Capability uses the full content width so its title does not
     consume a second line and push the lower cards below the viewport. */
  body main .capability-suite .section-intro.narrow {
    max-width: none;
  }

  body main .capability-suite .section-intro h2 {
    font-size: clamp(2.1rem, 2.65vw, 3rem);
  }

  /* Use the same left-hand heading line as the Main and feature pages. */
  body main .challenge .split-heading,
  body main .applications .split-heading {
    display: block;
  }

  body main .challenge .split-heading > .eyebrow,
  body main .applications .split-heading > .eyebrow {
    margin-bottom: 18px;
  }

  body main .challenge .split-heading h2,
  body main .applications .split-heading h2 {
    max-width: 1450px;
  }

  body main .challenge .split-heading > div > p {
    max-width: 1500px;
  }

  /* Tighten the gap while using the recovered space for clearer screenshots. */
  body main .ai-results-grid {
    margin-top: 16px;
  }

  body main .ai-result-image {
    height: 260px;
    padding: 7px;
  }

  /* These pages previously sat noticeably lower than the rest of the sequence. */
  body main .difference,
  body main .pilot {
    justify-content: flex-start;
    padding-top: 48px !important;
    padding-bottom: 64px !important;
  }
}

@media (min-width: 1200px) {
  body main .capability-suite .section-intro h2 {
    white-space: nowrap;
  }
}

@media (min-width: 901px) and (max-height: 850px) {
  body main .difference,
  body main .pilot {
    padding-top: 30px !important;
    padding-bottom: 46px !important;
  }

  body main .ai-result-image {
    height: 220px;
  }
}

@media (max-width: 900px) {
  body .site-header {
    border-radius: 6px;
  }

  body main .capability-visual.portrait img {
    max-height: 250px;
  }
}