/* ==========================================================================
   KOBIL — SuperApp family: closing CTA
   Figma: /superapp/ 5839:36497 (mobile 6087:53884) ·
          /digital-workplace-superapp/ 5837:31097 (mobile 5899:68124)

   Full-bleed photo, a white scrim over its left third, and an eyebrow +
   serif headline + outlined button on top. The scrim is Figma's
   "Rectangle 161124252" — a plain white-to-transparent ramp rotated -90deg
   over the left 688 of 1440 — reproduced as a CSS gradient rather than an
   exported asset, since that is exactly what it is.
   ========================================================================== */

.sec-sa-cta {
  position: relative;
  min-height: var(--w644);
  display: flex;
  align-items: center;
  background-image: var(--cta-bg);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

.sec-sa-cta::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: var(--scrim-width, 47.8%);
  background: linear-gradient(90deg, rgba(255, 255, 255, 0.92) 0%, rgba(255, 255, 255, 0) 100%);
  pointer-events: none;
}

.sec-sa-cta__inner {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--w48);
  width: 100%;
  max-width: var(--page-max);
  margin: 0 auto;
  padding: 0 var(--w80);
}

.sec-sa-cta__text {
  display: flex;
  flex-direction: column;
  gap: var(--w12);
  max-width: var(--w483);
  color: var(--navy);
}

.sec-sa-cta__eyebrow {
  font-family: var(--font-mono);
  font-size: var(--w14);
  font-weight: 500;
  line-height: var(--w32);
  text-transform: uppercase;
}

.sec-sa-cta__title {
  font-family: var(--font-serif);
  font-weight: 400;
  font-size: var(--w56);
  line-height: 1.2;
}

.sec-sa-cta__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--w8);
  height: var(--w56);
  padding: var(--w8) var(--w20) var(--w8) var(--w24);
  border: 1px solid var(--navy);
  border-radius: var(--w32);
  font-family: var(--font-ui);
  font-size: var(--w16);
  font-weight: 600;
  line-height: var(--w20);
  color: var(--navy);
  white-space: nowrap;
  transition: background-color var(--dur) var(--ease), color var(--dur) var(--ease);
}

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

.sec-sa-cta__btn-icon {
  width: var(--w18);
  height: var(--w18);
  transition: transform var(--dur) var(--ease);
}

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

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

/* Phone — Figma's 393x572 frame anchors the text to the top and lays the
   scrim across the full width of the upper 251px instead of the left
   third, so the copy sits on white while the photo runs out underneath. */
@media (max-width: 768px) {
  .sec-sa-cta {
    min-height: var(--m572);
    align-items: flex-start;
    background-image: var(--cta-bg-mobile, var(--cta-bg));
  }

  .sec-sa-cta::before {
    inset: 0 0 auto 0;
    width: 100%;
    height: var(--m251);
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.92) 0%, rgba(255, 255, 255, 0) 100%);
  }

  .sec-sa-cta__inner {
    gap: var(--m24);
    padding: var(--m39) var(--m24) 0;
  }

  .sec-sa-cta__eyebrow {
    font-size: var(--m12);
    line-height: var(--m24);
    letter-spacing: 1.5px;
  }

  .sec-sa-cta__title {
    font-size: var(--m30);
  }
}