/* ==========================================================================
   KOBIL — OneSec4All: Pre-Footer CTA
   Photo card (572px, radius 12) with corporate photo, white gradient scrim
   on the left (617px wide, a gradient rect rotated -90° in Figma) and
   a left-aligned copy column (539px) + notched button like the product
   page CTAs.
   ========================================================================== */

/* Figma 6087:54215: the CTA sits in Frame 2087325695 at x=-40 relative to the
   1360 content card, i.e. it breaks back out to the full 1440 page width and
   is NOT part of the inset card above it. Height 644, square corners. */
.sec-application-security-cta {
  position: relative;
  isolation: isolate;
  overflow: clip;
  display: flex;
  align-items: center;
  min-height: 644px;
  width: calc(100% + var(--page-pad) * 2);
  margin-left: calc(-1 * var(--page-pad));
  padding: 48px 80px;
  border-radius: 0;
}

/* Figma 6151:71223 renders the photo at 113.81% x 151.06% of the 1440x644
   band, offset -13.81% / -34.69% — i.e. zoomed ~14% past `cover` and anchored
   to the right. Sized by width (the source aspect matches Figma's render
   aspect to 4 decimals) so the crop is exact rather than approximated. */
.sec-application-security-cta__photo {
  position: absolute;
  top: -34.69%;
  left: -13.81%;
  z-index: -2;
  width: 113.81%;
  height: auto;
  max-width: none;
}

/* White scrim: in Figma a -90°-rotated 572x617 rect with a gradient
   white(0.9)→transparent at 80% opacity → left→right, 0.72→0 */
.sec-application-security-cta__scrim {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  z-index: -1;
  width: 617px;
  max-width: 100%;
  background: linear-gradient(90deg, rgba(255, 255, 255, 0.72) 0%, rgba(255, 255, 255, 0) 100%);
}

/* ---- Copy column: left-aligned, vertically centered ---- */

.sec-application-security-cta__content {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 48px;
  width: 100%;
  max-width: 539px;
}

.sec-application-security-cta__copy {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.sec-application-security-cta__eyebrow {
  font-family: var(--font-mono);
  font-size: 14px;
  line-height: 32px;
  font-weight: 500;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--navy);
}

.sec-application-security-cta__title {
  font-family: var(--font-serif);
  font-size: 56px;
  line-height: 1.2;
  font-weight: 400;
  color: var(--navy);
}

/* ---- Button: simple outline pill (Figma has no notch) ---- */

.sec-application-security-cta__btn {
  height: 56px;
  padding: 8px 20px 8px 24px;
  gap: 8px;
  font-size: 16px;
  line-height: 20px;
  border: 1px solid var(--navy);
  border-radius: var(--radius-pill);
  background: transparent;
  color: var(--navy);
}

.sec-application-security-cta__btn:hover {
  background: var(--navy);
  color: var(--white);
}

.sec-application-security-cta__btn:hover .sec-application-security-cta__btn-icon {
  filter: brightness(0) invert(1);
}

.sec-application-security-cta__btn:focus-visible {
  outline: 2px solid var(--blue);
  outline-offset: 3px;
}

.sec-application-security-cta__btn-icon {
  transition: transform var(--dur) var(--ease);
}

.sec-application-security-cta__btn:hover .sec-application-security-cta__btn-icon {
  transform: translateX(3px);
}

/* ---- Responsive ---- */

@media (max-width: 1024px) {
  .sec-application-security-cta {
    min-height: 520px;
  }

  .sec-application-security-cta__title {
    font-size: 36px;
    line-height: 46px;
  }
}

@media (max-width: 768px) {
  .sec-application-security-cta {
    min-height: 460px;
    padding: 48px 24px;
  }

  /* Photo shifts further under the text on narrow screens —
     scrim goes full width for readability */
  .sec-application-security-cta__scrim {
    width: 100%;
    background: linear-gradient(
      90deg,
      rgba(255, 255, 255, 0.8) 0%,
      rgba(255, 255, 255, 0.35) 100%
    );
  }

  .sec-application-security-cta__content {
    gap: 32px;
  }

  .sec-application-security-cta__title {
    font-size: 32px;
    line-height: 42px;
  }
}

@media (max-width: 480px) {
  .sec-application-security-cta {
    min-height: 440px;
    padding: 40px 20px;
  }

  .sec-application-security-cta__eyebrow {
    font-size: 20px;
    line-height: 28px;
  }

  .sec-application-security-cta__title {
    font-size: 28px;
    line-height: 36px;
  }
}