/* ==========================================================================
   KOBIL — Technology / Application Security — Section: Overview
   Figma 6087:53971 ("text", 1280x346 at x=40 inside Frame 2087325757).

   This is the first block of the white card that overlaps the hero. The card
   itself is 1360 wide and inset 40px from each side of the 1440 page (that
   inset comes from .page's own padding, see .page-surface--overlap in
   css/base.css), so this section only adds the 40px inner gutter that brings
   its content to the 1280 column.

   Two columns: the title (572 wide) starts at the top, the paragraph (568
   wide) sits in the right column and is pushed down so its last line aligns
   with the title's baseline (Figma: title y=80, paragraph y=197).
   ========================================================================== */

.sec-application-security-overview {
  width: 100%;
  padding: 80px 40px 0;
}

.as-overview__inner {
  display: flex;
  align-items: flex-start;
  gap: 60px;
  max-width: 1280px;
  margin: 0 auto;
}

.as-overview__head {
  flex: 1 1 572px;
  min-width: 0;
  max-width: 572px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.as-overview__tag {
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 500;
  line-height: 18px;
  letter-spacing: 0.48px;
  text-transform: uppercase;
  color: var(--navy-70);
}

.as-overview__title {
  font-family: var(--font-serif);
  font-size: 56px;
  font-weight: 400;
  line-height: 1.3;
  color: var(--navy);
}

.as-overview__copy {
  flex: 1 1 568px;
  min-width: 0;
  max-width: 568px;
  /* Figma offsets the paragraph 117px below the title block's top */
  margin-top: 117px;
  font-family: var(--font-sans);
  font-size: 18px;
  font-weight: 400;
  line-height: 26px;
  color: var(--navy-80);
}

/* ==========================================================================
   Responsive
   ========================================================================== */

@media (max-width: 1200px) {
  .as-overview__inner {
    flex-direction: column;
    gap: 24px;
  }

  .as-overview__head,
  .as-overview__copy {
    flex: 0 0 auto;
    max-width: none;
    width: 100%;
  }

  .as-overview__copy {
    margin-top: 0;
  }

  .as-overview__title {
    font-size: 44px;
  }
}

@media (max-width: 768px) {
  .sec-application-security-overview {
    padding: 48px 24px 0;
  }

  .as-overview__title {
    font-size: 34px;
    line-height: 1.2;
  }

  .as-overview__copy {
    font-size: 16px;
    line-height: 23px;
  }
}

@media (max-width: 480px) {
  .sec-application-security-overview {
    padding: 40px 20px 0;
  }

  .as-overview__title {
    font-size: 30px;
    line-height: 1.2;
  }
}