/* Application Security — Figma-preserving responsive layer.
   Desktop values are measured on the 1440 frame and flow through --w*;
   phone values are measured on the 393 frame and flow through --m*. */

.page--application-security {
  --page-pad: var(--w40);
  padding: 0 var(--page-pad);
  gap: 0;
}

.page--application-security .sec-application-security-hero {
  min-height: var(--w1290);
  margin-top: calc(-1 * var(--w100));
  padding: var(--w246) 0 0;
}

.page--application-security .os4a-hero__bg-img {
  height: var(--w1290);
}

.page--application-security .os4a-hero__intro {
  gap: var(--w48);
  width: var(--w813);
  max-width: calc(100% - var(--w160));
  margin-left: var(--w80);
}

.page--application-security .os4a-hero__heading { gap: var(--w24); }
.page--application-security .os4a-hero__crumb {
  gap: var(--w12);
  font-size: var(--w12);
  line-height: var(--w18);
  letter-spacing: 0.48px;
}
.page--application-security .os4a-hero__crumb-dot { width: var(--w3); height: var(--w3); }
.page--application-security .os4a-hero__title { font-size: var(--w64); line-height: 1.28; }
.page--application-security .os4a-hero__subtitle { display: none; }

.page--application-security .os4a-hero__cta {
  gap: var(--w8);
  min-width: var(--w164);
  height: var(--w56);
  padding: var(--w8) var(--w20) var(--w8) var(--w24);
  justify-content: center;
  font-size: var(--w16);
  line-height: var(--w20);
  border-radius: var(--w32);
}
.page--application-security .os4a-hero__cta::before {
  border-radius: var(--w32);
  -webkit-mask-image: none;
  mask-image: none;
}
.page--application-security .os4a-hero__cta-icon { width: var(--w18); height: var(--w18); }

.page--application-security .os4a-hero__stage {
  top: var(--w192);
  left: var(--w745);
  width: var(--w674);
  height: var(--w465);
}
.page--application-security .os4a-hero__stage picture,
.page--application-security .os4a-hero__visual {
  display: block;
  width: 100%;
  height: 100%;
}
.page--application-security .os4a-hero__visual { object-fit: contain; }
.page--application-security .os4a-hero__canvas { width: var(--w674); height: var(--w465); transform: none; }
.page--application-security .os4a-hero__iphone { top: var(--w48); left: var(--w149); width: var(--w363); height: var(--w399); }
.page--application-security .os4a-hero__lock { top: var(--w94); left: var(--w130); width: var(--w101); height: var(--w101); }
.page--application-security .os4a-hero__code { top: var(--w179); left: var(--w15); width: var(--w258); height: var(--w226); }
.page--application-security .os4a-hero__code-src { top: var(--w34); left: var(--w38); width: var(--w169); font-size: var(--w10); line-height: var(--w13); }
.page--application-security .os4a-hero__code-brand { left: var(--w38); bottom: var(--w26); font-size: var(--w9); }
.page--application-security .os4a-hero__toast { top: var(--w336); left: var(--w147); width: var(--w150); height: var(--w55); }
.page--application-security .os4a-hero__toast-bg { width: var(--w150); height: var(--w55); }
.page--application-security .os4a-hero__toast-body { inset: var(--w12) var(--w13); gap: var(--w7); }
.page--application-security .os4a-hero__toast-icon { width: var(--w21); height: var(--w22); }
.page--application-security .os4a-hero__toast-title { font-size: var(--w10); }
.page--application-security .os4a-hero__toast-sub { font-size: var(--w9); }
.page--application-security .os4a-hero__print { top: var(--w210); left: var(--w434); width: var(--w101); height: var(--w101); }
.page--application-security .os4a-hero__shield { top: var(--w36); left: var(--w407); width: var(--w130); height: var(--w139); }

.page--application-security .page-surface--overlap {
  width: 100%;
  margin-left: 0;
  padding: 0;
  margin-top: 0;
  border-radius: 0;
}

.page--application-security .as-overview__copy strong { font-weight: 600; }
.page--application-security .as-overview__title-accent,
.page--application-security .as-protection__title-accent {
  background: linear-gradient(90deg, #3ebffc 13.354%, #1046cf 32.357%, #696ef5 59.145%, #ca80f4 84.827%);
  background-clip: text;
  -webkit-background-clip: text;
  color: #1046cf;
  -webkit-text-fill-color: transparent;
}
.page--application-security .as-trust__title-accent {
  background: linear-gradient(90deg, #3ebffc 13.354%, #1046cf 32.357%, #696ef5 59.145%, #ca80f4 84.827%);
  background-clip: text;
  -webkit-background-clip: text;
  color: #1046cf;
  -webkit-text-fill-color: transparent;
}
.page--application-security .as-protection__mobile-visual,
.page--application-security .as-protection__pagination,
.page--application-security .as-protection__mobile-break {
  display: none;
}

/* Preserve the desktop Figma layout all the way down to 769px. */
@media (min-width: 769px) {
  .page--application-security .sec-application-security-overview {
    position: relative;
    z-index: 2;
    width: 100%;
    margin-top: calc(-1 * var(--w524));
    overflow: hidden;
    background: var(--white);
    border-radius: var(--w12) var(--w12) 0 0;
  }
  .page--application-security .page-surface--overlap {
    width: calc(100% + var(--w80));
    margin-left: calc(-1 * var(--w40));
    padding: 0 var(--w40);
    background: linear-gradient(to bottom, transparent 0 var(--w178), var(--white) var(--w178) 100%);
  }
  .page--application-security .os4a-hero__stage::after {
    content: "";
    position: absolute;
    left: var(--w128);
    bottom: var(--w18);
    width: var(--w398);
    height: var(--w3);
    background: linear-gradient(90deg, transparent 0%, #fff 29.327%, #fff 71.635%, transparent 100%);
    pointer-events: none;
  }
  .page--application-security .sec-application-security-overview {
    min-height: var(--w346);
    padding: var(--w80) var(--w40) 0;
  }
  .page--application-security .as-overview__inner {
    flex-direction: row;
    gap: var(--w60);
    max-width: var(--w1280);
  }
  .page--application-security .as-overview__head { flex: 1 1 var(--w572); max-width: var(--w572); gap: var(--w16); }
  .page--application-security .as-overview__tag { font-size: var(--w12); line-height: var(--w18); letter-spacing: 0.48px; }
  .page--application-security .as-overview__title { font-size: var(--w56); line-height: 1.3; }
  .page--application-security .as-overview__copy {
    flex: 1 1 var(--w568); max-width: var(--w568); margin-top: var(--w117);
    font-size: var(--w18); line-height: var(--w26);
  }

  .page--application-security .sec-application-security-logos {
    min-height: var(--w432); padding: var(--w100) var(--w40); gap: var(--w88); background: var(--white);
  }
  .page--application-security .sec-application-security-logos .o4s-logos__heading {
    max-width: var(--w792); font-size: var(--w32); line-height: var(--w42);
  }
  .page--application-security .sec-application-security-logos .o4s-logos__rows { gap: var(--w40); }
  .page--application-security .sec-application-security-logos .o4s-logos__row { gap: var(--w24) var(--w72); }
  .page--application-security .sec-application-security-logos .o4s-logos__row img { width: auto; height: var(--w31); max-width: var(--w176); }

  .page--application-security .sec-application-security-steps {
    min-height: var(--w786); gap: var(--w20); padding: var(--w80) var(--w40) var(--w40);
  }
  .page--application-security .as-steps__head { gap: var(--w20); max-width: var(--w801); }
  .page--application-security .as-steps__title { font-size: var(--w56); line-height: 1.3; }
  .page--application-security .as-steps__lead { font-size: var(--w18); line-height: var(--w26); }
  .page--application-security .as-steps__body { flex-direction: row; align-items: center; gap: var(--w115); max-width: var(--w1220); }
  .page--application-security .as-steps__list { flex: 1 1 var(--w578); max-width: var(--w578); gap: var(--w24); }
  .page--application-security .as-steps__row { gap: var(--w24); padding-bottom: var(--w20); cursor: pointer; }
  .page--application-security .as-steps__row-copy { gap: var(--w8); }
  .page--application-security .as-steps__row-title { font-size: var(--w20); line-height: var(--w26); }
  .page--application-security .as-steps__row-desc { font-size: var(--w16); line-height: var(--w23); }
  .page--application-security .as-steps__row-icon { width: var(--w24); height: var(--w24); }
  .page--application-security .as-steps__visual { flex: 0 0 var(--w527); width: var(--w527); height: var(--w428); max-width: none; }
  /* Rows 2 and 3 have no desktop visual of their own: the Steps component
     (Figma 6087:53994) carries a single 527x428 image node, the row-1 state.
     They therefore reuse the un-matted 393x620 phone-frame renders the mobile
     carousel already ships, shown at natural size and centred. At that size the
     artwork lands on the same rows as the row-1 visual (content y 81..345
     against its 88..338) and only the transparent margin overflows the box, so
     `transform` stays free for the .is-changing swap. What this replaced were
     578x656 opaque crops whose canvas ended while the wash was still
     (222,226,236) and whose phone was clipped at the bottom edge — that
     boundary is the rectangle that showed on the white card. */
  .page--application-security .as-steps__visual img[src*="-mobile@2x"] {
    width: var(--w393);
    height: var(--w620);
    margin: calc((var(--w428) - var(--w620)) / 2) auto;
    /* Their bloom is wider than the 393 phone canvas, so it is cut at the left
       and right edges: 2.1/255 mean (6.8 peak) running the image's full height,
       against the row-1 visual's exact 0.00 there. On the phone that cut falls
       outside the viewport (the mobile rule bleeds the image 28 past each side),
       which is why it only shows here, as two faint verticals on the white card.
       Feathering the outer 60 dissolves the step into the wash's own falloff —
       the strong artwork starts at 84 (row 2) and 135 (row 3), so the ramp never
       reaches it. Top and bottom need no feather: they measure 0.00 already. */
    -webkit-mask-image: linear-gradient(to right, transparent 0, #000 var(--w60),
      #000 calc(100% - var(--w60)), transparent 100%);
    mask-image: linear-gradient(to right, transparent 0, #000 var(--w60),
      #000 calc(100% - var(--w60)), transparent 100%);
  }
  .page--application-security .as-steps__mobile-visual { display: none; }

  .page--application-security .sec-application-security-trust {
    min-height: var(--w800); gap: var(--w40); padding: var(--w80) var(--w40);
  }
  .page--application-security .as-trust__title { max-width: var(--w792); font-size: var(--w56); line-height: 1.3; }
  .page--application-security .as-trust__grid { grid-template-columns: repeat(4,minmax(0,1fr)); gap: var(--w24); }
  .page--application-security .as-trust__card { padding: 0 var(--w16); }
  .page--application-security .as-trust__visual { min-height: var(--w178); }
  .page--application-security .as-trust__body { gap: var(--w12); padding: var(--w24) 0; }
  .page--application-security .as-trust__label { font-size: var(--w11); line-height: var(--w15); letter-spacing: var(--w1); }
  .page--application-security .as-trust__headrow { gap: var(--w12); }
  .page--application-security .as-trust__icon { width: var(--w32); height: var(--w32); border-radius: var(--w10); }
  .page--application-security .as-trust__card-title { font-size: var(--w18); line-height: var(--w24); font-weight: 600; }
  .page--application-security .as-trust__desc { font-size: var(--w14); line-height: var(--w20); }

  .page--application-security .sec-application-security-protection {
    min-height: var(--w691); gap: var(--w56); padding: var(--w40);
  }
  .page--application-security .as-protection__title { max-width: var(--w768); font-size: var(--w56); line-height: 1.3; }
  .page--application-security .as-protection__body { flex-direction: row; align-items: center; gap: var(--w175); }
  .page--application-security .as-protection__list { flex: 1 1 var(--w578); max-width: var(--w578); gap: var(--w12); }
  .page--application-security .as-protection__row { gap: var(--w24); padding-bottom: var(--w20); cursor: pointer; }
  .page--application-security .as-protection__row-copy { gap: var(--w8); }
  .page--application-security .as-protection__row-title { font-size: var(--w20); line-height: var(--w26); }
  .page--application-security .as-protection__row-desc { font-size: var(--w14); line-height: var(--w20); }
  .page--application-security .as-protection__row-icon { width: var(--w24); height: var(--w24); }
  .page--application-security .as-protection__visual { flex: 0 0 var(--w527); width: var(--w527); height: var(--w428); max-width: none; }

  .page--application-security .sec-application-security-compliance { min-height: var(--w573); gap: var(--w60); padding: var(--w120) var(--w40); }
  .page--application-security .as-compliance__top { gap: var(--w16); max-width: var(--w1080); }
  .page--application-security .as-compliance__title { font-size: var(--w56); }
  .page--application-security .as-compliance__lead { font-size: var(--w20); line-height: var(--w26); }
  .page--application-security .as-compliance__badges { gap: var(--w24) var(--w60); max-width: var(--w778); }

  .page--application-security .sec-application-security-evolves { min-height: var(--w627); padding: var(--w173) var(--w40) var(--w195); }
  .page--application-security .sec-application-security-evolves .o4s-evolves__inner { gap: var(--w80); }
  .page--application-security .sec-application-security-evolves .o4s-evolves__grid { flex-direction: row; gap: var(--w60); }
  .page--application-security .sec-application-security-evolves .o4s-evolves__item--1 { flex: 0 1 var(--w382); }
  .page--application-security .sec-application-security-evolves .o4s-evolves__item--2 { flex: 0 1 var(--w329); }
  .page--application-security .sec-application-security-evolves .o4s-evolves__item--3 { flex: 0 1 var(--w348); }
  .page--application-security .sec-application-security-evolves .o4s-evolves__title { font-size: var(--w44); }
  .page--application-security .sec-application-security-evolves .o4s-evolves__desc { font-size: var(--w18); line-height: var(--w26); }

  .page--application-security .sec-application-security-why-kobil { padding: var(--w160) var(--w40); gap: var(--w64); }
  .page--application-security .sec-application-security-why-kobil .os4a-why__top { gap: var(--w24); }
  .page--application-security .sec-application-security-why-kobil .os4a-why__heading { max-width: var(--w852); font-size: var(--w56); }
  .page--application-security .sec-application-security-why-kobil .os4a-why__subline,
  .page--application-security .sec-application-security-why-kobil .os4a-why__item-text { font-size: var(--w18); line-height: var(--w26); }
  .page--application-security .sec-application-security-why-kobil .os4a-why__grid {
    flex-direction: row; width: 100%; max-width: var(--w1280); gap: var(--w60);
  }
  .page--application-security .sec-application-security-why-kobil .os4a-why__item { width: var(--w300); }
  .page--application-security .sec-application-security-why-kobil .os4a-why__item--wide { width: var(--w340); }

  .page--application-security .sec-application-security-faq { gap: var(--w60); padding: var(--w60) var(--w40) var(--w80); }
  .page--application-security .sec-application-security-faq__title { font-size: var(--w56); }
  .page--application-security .sec-application-security-faq__list { margin-top: 0; }

  .page--application-security .sec-application-security-cta {
    min-height: var(--w644); padding: var(--w48) var(--w80);
  }
  .page--application-security .sec-application-security-cta__content { gap: var(--w48); max-width: var(--w539); }
  .page--application-security .sec-application-security-cta__title { font-size: var(--w56); }
}

.page--application-security .as-steps__visual img,
.page--application-security .as-protection__visual img {
  transition: opacity 240ms ease, transform 240ms ease;
}
.page--application-security .as-steps__visual img.is-changing,
.page--application-security .as-protection__visual img.is-changing {
  opacity: 0;
  transform: scale(.975);
}

@media (max-width: 768px) {
  body:has(.page--application-security) .site-header { padding-top: var(--m16); }
  .page--application-security { --page-pad: var(--m12); padding: 0 var(--page-pad); }
  .page--application-security .sec-application-security-hero {
    width: calc(100% + var(--m24));
    min-height: var(--m1037);
    margin-top: calc(-1 * var(--m76));
    margin-left: calc(-1 * var(--m12));
    padding: 0;
  }
  .page--application-security .os4a-hero__bg-img { height: var(--m1037); }
  .page--application-security .os4a-hero__intro {
    position: absolute; top: var(--m116); left: var(--m32);
    align-items: center; gap: var(--m32); width: var(--m329); max-width: none; margin: 0; text-align: center;
  }
  .page--application-security .os4a-hero__heading { align-items: center; gap: var(--m20); }
  .page--application-security .os4a-hero__crumb { gap: var(--m12); font-size: var(--m12); line-height: var(--m18); letter-spacing: 0.48px; }
  .page--application-security .os4a-hero__crumb-dot { width: var(--m3); height: var(--m3); }
  .page--application-security .os4a-hero__title { font-size: var(--m36); line-height: 1.2; }
  .page--application-security .os4a-hero__title br { display: block; }
  .page--application-security .os4a-hero__subtitle {
    display: block; max-width: var(--m329); margin-top: calc(-1 * var(--m8));
    font-family: var(--font-sans); font-size: var(--m16); font-weight: 400; line-height: var(--m23); color: var(--white);
  }
  .page--application-security .os4a-hero__cta {
    min-width: var(--m137); height: var(--m40); gap: var(--m8); padding: var(--m4) var(--m12) var(--m4) var(--m16);
    font-size: var(--m14); line-height: var(--m18);
    border-radius: var(--m32);
  }
  .page--application-security .os4a-hero__cta::before {
    border-radius: var(--m32);
  }
  .page--application-security .os4a-hero__cta-icon { width: var(--m18); height: var(--m18); }
  .page--application-security .os4a-hero__stage {
    top: var(--m433); left: var(--m12); width: var(--m368); height: var(--m244); margin: 0;
  }
  .page--application-security .os4a-hero__stage::after {
    content: "";
    position: absolute;
    z-index: 2;
    left: 50%;
    bottom: 0;
    width: calc(var(--m220) - var(--m3));
    height: var(--m2);
    transform: translateX(-50%);
    background: linear-gradient(90deg, transparent 0%, #fff 29.327%, #fff 71.635%, transparent 100%);
    pointer-events: none;
  }
  .page--application-security .os4a-hero__visual { object-fit: contain; }
  .page--application-security .os4a-hero__canvas {
    display: block; left: calc(-1 * var(--m18)); width: var(--m407); height: var(--m280); transform: none;
  }
  .page--application-security .os4a-hero__iphone { top: var(--m28); left: var(--m90); width: var(--m220); height: var(--m240); }
  .page--application-security .os4a-hero__lock { top: var(--m56); left: var(--m79); width: var(--m60); height: var(--m60); }
  .page--application-security .os4a-hero__code { top: var(--m108); left: var(--m9); width: var(--m157); height: var(--m137); }
  .page--application-security .os4a-hero__code-src { top: var(--m20); left: var(--m23); width: var(--m100); font-size: var(--m6); line-height: var(--m8); }
  .page--application-security .os4a-hero__code-brand { top: auto; left: var(--m23); bottom: var(--m16); font-size: var(--m5); }
  .page--application-security .os4a-hero__toast { top: calc(var(--m197) + var(--m5)); left: var(--m87); width: var(--m90); height: var(--m34); }
  .page--application-security .os4a-hero__toast-bg { width: var(--m90); height: var(--m34); }
  .page--application-security .os4a-hero__toast-body { inset: var(--m7) var(--m8); gap: var(--m4); }
  .page--application-security .os4a-hero__toast-icon { width: var(--m13); height: var(--m13); }
  .page--application-security .os4a-hero__toast-title { font-size: var(--m6); }
  .page--application-security .os4a-hero__toast-sub { font-size: var(--m5); }
  .page--application-security .os4a-hero__print { top: var(--m126); left: calc(var(--m270) - var(--m10)); width: var(--m60); height: var(--m60); }
  .page--application-security .os4a-hero__shield { top: var(--m22); left: var(--m244); width: var(--m79); height: var(--m85); }

  .page--application-security .page-surface--overlap {
    width: 100%; margin-left: 0; padding: 0;
    margin-top: 0; border-radius: 0;
    background: linear-gradient(to bottom, transparent 0 var(--m42), var(--white) var(--m42) 100%);
  }

  .page--application-security .sec-application-security-overview {
    position: relative; z-index: 2; width: 100%; min-height: var(--m270);
    margin-top: calc(-1 * var(--m312)); padding: var(--m40) var(--m16);
    overflow: hidden; background: var(--white); border-radius: var(--m12) var(--m12) 0 0;
  }
  .page--application-security .as-overview__inner { display: block; }
  .page--application-security .as-overview__tag { display: none; }
  .page--application-security .as-overview__title { font-size: var(--m34); line-height: 1.2; }
  .page--application-security .as-overview__copy { margin-top: var(--m16); font-size: var(--m16); line-height: var(--m23); }

  .page--application-security .sec-application-security-logos {
    height: var(--m335); min-height: var(--m335); padding: var(--m40) var(--m16); gap: var(--m40); background: var(--white);
  }
  .page--application-security .sec-application-security-logos .o4s-logos__heading { font-size: var(--m26); line-height: var(--m32); }
  .page--application-security .sec-application-security-logos .o4s-logos__rows {
    display: grid; grid-template-columns: var(--m157) var(--m132); align-items: center;
    justify-content: center; gap: var(--m40) var(--m24); width: 100%;
  }
  .page--application-security .sec-application-security-logos .o4s-logos__row { display: contents; }
  .page--application-security .sec-application-security-logos .o4s-logos__row li { justify-content: center; }
  .page--application-security .sec-application-security-logos .o4s-logos__row:first-child li:nth-child(1) { order: 1; }
  .page--application-security .sec-application-security-logos .o4s-logos__row:first-child li:nth-child(2) { order: 2; }
  .page--application-security .sec-application-security-logos .o4s-logos__row:first-child li:nth-child(4) { order: 3; }
  .page--application-security .sec-application-security-logos .o4s-logos__row:nth-child(2) li:nth-child(2) { order: 4; }
  .page--application-security .sec-application-security-logos .o4s-logos__row:first-child li:nth-child(3) { order: 5; }
  .page--application-security .sec-application-security-logos .o4s-logos__row:nth-child(2) li:nth-child(1) { order: 6; }
  .page--application-security .sec-application-security-logos .o4s-logos__row:first-child li:nth-child(1) img { width: var(--m157); }
  .page--application-security .sec-application-security-logos .o4s-logos__row:first-child li:nth-child(2) img { width: var(--m100); }
  .page--application-security .sec-application-security-logos .o4s-logos__row:first-child li:nth-child(4) img { width: var(--m108); }
  .page--application-security .sec-application-security-logos .o4s-logos__row:nth-child(2) li:nth-child(2) img { width: var(--m132); }
  .page--application-security .sec-application-security-logos .o4s-logos__row:first-child li:nth-child(3) img { width: var(--m140); }
  .page--application-security .sec-application-security-logos .o4s-logos__row:nth-child(2) li:nth-child(1) img { width: var(--m133); }
  .page--application-security .sec-application-security-logos .o4s-logos__row img { max-width: none; max-height: var(--m35); }

  .page--application-security .sec-application-security-steps {
    height: auto; min-height: 0; padding: var(--m60) var(--m16) 0; gap: var(--m24);
    /* isolate: the card visuals sit at z-index -1 (their wash must paint
       under the card copy), and without a stacking context here they would
       drop behind the page background instead. */
    position: relative; isolation: isolate;
  }
  /* The phone frame draws a navy-40 hairline on both section boundaries —
     Vector 995 (logos -> steps, y 605) and Vector 994 (steps -> trust,
     y 2107) in 6151:73074. The section box is already the line's exact
     369px span (page pad 12 each side), so the lines sit edge to edge. */
  .page--application-security .sec-application-security-steps::before,
  .page--application-security .sec-application-security-steps::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    height: 1px;
    background: var(--navy-40);
  }
  .page--application-security .sec-application-security-steps::before { top: 0; }
  .page--application-security .sec-application-security-steps::after { bottom: 0; }
  .page--application-security .as-steps__head { gap: var(--m12); }
  .page--application-security .as-steps__title { font-size: var(--m34); line-height: 1.2; }
  .page--application-security .as-steps__lead { font-size: var(--m16); line-height: var(--m23); }
  /* Figma keeps 60px between the last card and the section's bottom
     hairline (cards end at content-y 2047, Vector 994 sits at 2107). */
  .page--application-security .as-steps__body { display: block; padding-bottom: var(--m60); }
  /* Figma 6100:61838 (the phone `content` frame) — rebuilt Aug 2026.
     Cards stack in normal flow: 12 between them, 32 above every card but the first,
     24 between a card's copy and its visual. Those three numbers plus the natural
     text height reproduce the frame's card heights exactly (0+94+24+260 = 378,
     32+74+24+260 = 390, 32+74+24+227 = 357), so nothing is hardcoded.
     The previous version pinned each row to a measured height (439/430/462) and
     absolutely positioned the visual at the bottom, which left ~120px of dead space
     between the copy and the image wherever the text ran shorter than the box — the
     spacing complaint. It also carried the desktop's `border-bottom` hairline, which
     the phone frame does not have. */
  .page--application-security .as-steps__list { display: flex; flex-direction: column; gap: var(--m12); max-width: none; }
  .page--application-security .as-steps__row {
    position: static; display: flex; flex-direction: column; align-items: stretch;
    gap: var(--m24); flex: 0 0 auto; width: 100%; height: auto;
    padding: 0; border: 0; overflow: visible;
  }
  .page--application-security .as-steps__row + .as-steps__row { padding-top: var(--m32); }
  /* The desktop rule is `flex: 1 1 0`, which in a column flex applies to *height* and
     collapses the copy. */
  .page--application-security .as-steps__row-copy { gap: var(--m8); flex: 0 0 auto; }
  .page--application-security .as-steps__row-title { font-size: var(--m20); line-height: var(--m26); }
  /* The phone frame does not highlight the first card — all three titles are System/100%,
     unlike the desktop where row 1 is Primary/Dark Blue. */
  .page--application-security .as-steps__row--active .as-steps__row-title { color: var(--navy); }
  .page--application-security .as-steps__row-desc { font-size: var(--m14); line-height: var(--m20); }
  .page--application-security .as-steps__row-icon { display: none; }
  /* The visuals are the image nodes' FULL renders (393x620 at 1x — the Aug
     2026 wash spills ~50px above and ~190px below the 260px frame box), so
     any crop back to the box rows re-creates the hard edge this replaced.
     They are un-matted to real alpha (1x contentsOnly render's alpha +
     2x white-flattened export), because the spill must overlap the
     neighbouring card copy without whiting it out — same overlap the
     phone frame itself composites. The negative vertical margins give the
     flow box back the frame's own rows (620 - 166 - 194 = 260;
     card 3: 620 - 168 - 225 = 227), so the card rhythm the comment above
     derives stays untouched. z-index -1 paints the wash under the copy the
     spill reaches — Figma keeps the text above the vector too. */
  .page--application-security .as-steps__mobile-visual {
    position: relative; z-index: -1; display: block; height: auto;
    width: calc(100% + 2 * var(--m28));
    /* base.css caps every img at `max-width: 100%`, which silently clipped the
       bleed back to the content column. 28 = --page-pad 12 + the section's 16. */
    max-width: none;
    margin: calc(-1 * var(--m166)) 0 calc(-1 * var(--m194)) calc(-1 * var(--m28));
  }
  .page--application-security .as-steps__row:nth-child(3) .as-steps__mobile-visual {
    margin-top: calc(-1 * var(--m168));
    margin-bottom: calc(-1 * var(--m225));
  }
  .page--application-security .as-steps__visual { display: none; }

  .page--application-security .sec-application-security-trust {
    height: auto; min-height: 0; padding: var(--m60) var(--m16); gap: var(--m32);
  }
  .page--application-security .as-trust__title { font-size: var(--m34); line-height: 1.2; text-align: center; }
  .page--application-security .as-trust__grid { grid-template-columns: 1fr; gap: var(--m24); }
  .page--application-security .as-trust__card { padding: 0; }
  .page--application-security .as-trust__visual { justify-content: center; min-height: var(--m178); height: var(--m178); }
  .page--application-security .as-trust__visual img { width: var(--m270); }
  .page--application-security .as-trust__body { gap: var(--m12); padding: var(--m9) 0 0; }
  .page--application-security .as-trust__label { font-size: var(--m11); line-height: var(--m15); }
  .page--application-security .as-trust__card-title { font-size: var(--m16); line-height: var(--m23); font-weight: 600; }
  .page--application-security .as-trust__desc { font-size: var(--m14); line-height: var(--m20); }

  .page--application-security .sec-application-security-protection {
    height: var(--m631); min-height: var(--m631); padding: var(--m40) 0; gap: var(--m32); overflow: hidden;
  }
  .page--application-security .as-protection__title { width: var(--m337); margin: 0 var(--m16); font-size: var(--m34); line-height: 1.2; }
  .page--application-security .as-protection__mobile-break { display: block; }
  .page--application-security .as-protection__body { flex-direction: column; align-items: stretch; gap: var(--m48); }
  .page--application-security .as-protection__list {
    flex: none; flex-direction: row; gap: var(--m10); width: 100%; max-width: none; height: var(--m370);
    padding-left: var(--m16); padding-right: var(--m16); overflow-x: auto; overflow-y: hidden;
    scroll-snap-type: x mandatory; scroll-padding-left: var(--m16); scrollbar-width: none;
  }
  .page--application-security .as-protection__list::-webkit-scrollbar { display: none; }
  .page--application-security .as-protection__row {
    position: relative; display: block; flex: 0 0 var(--m248); height: var(--m370); padding: var(--m15) 0 0;
    border: 0; overflow: hidden; scroll-snap-align: start;
  }
  .page--application-security .as-protection__row-copy { gap: var(--m8); }
  .page--application-security .as-protection__row-title,
  .page--application-security .as-protection__row--active .as-protection__row-title { font-size: var(--m20); line-height: var(--m26); color: var(--navy); }
  .page--application-security .as-protection__row-desc { font-size: var(--m14); line-height: var(--m20); }
  .page--application-security .as-protection__row-icon { display: none; }
  .page--application-security .as-protection__mobile-visual {
    position: absolute; left: 50%; bottom: 0; display: block; width: var(--m248); height: var(--m222);
    object-fit: contain; object-position: center bottom; transform: translateX(-50%);
  }
  .page--application-security .as-protection__row:first-child .as-protection__mobile-visual {
    left: var(--m4); bottom: var(--m2); width: var(--m204); height: var(--m200); transform: none;
  }
  .page--application-security .as-protection__visual { display: none; }
  .page--application-security .as-protection__pagination { display: flex; justify-content: center; gap: var(--m4); height: var(--m2); }
  .page--application-security .as-protection__dot {
    width: var(--m16); height: var(--m2); padding: 0; border: 0; border-radius: var(--m2); background: #e2e7f2;
  }
  .page--application-security .as-protection__dot.is-active { background: var(--navy); }

  .page--application-security .sec-application-security-compliance { min-height: 0; padding: var(--m32) var(--m16); gap: var(--m24); }
  .page--application-security .as-compliance__top { gap: var(--m12); }
  .page--application-security .as-compliance__title { font-size: var(--m34); line-height: 1.2; }
  .page--application-security .as-compliance__lead { font-size: var(--m14); line-height: var(--m20); }
  .page--application-security .as-compliance__badges { gap: var(--m20) var(--m28); }
  .page--application-security .as-compliance__badge--gdpr,
  .page--application-security .as-compliance__badge--psd2,
  .page--application-security .as-compliance__badge--ccpa { height: var(--m44); }
  .page--application-security .as-compliance__badge--privacy { height: var(--m26); }
  .page--application-security .as-compliance__badge--eidas { height: var(--m19); }
  .page--application-security .as-compliance__badge--obe { height: var(--m32); }
  .page--application-security .as-compliance__badge--hipaa { height: calc(var(--m40) + var(--m3)); }
  .page--application-security .as-compliance__badge--swift { height: var(--m35); }
  .page--application-security .as-compliance__badge--bddk { height: calc(var(--m44) - var(--m3)); }
  .page--application-security .as-compliance__badge--glba { height: var(--m40); }

  .page--application-security .sec-application-security-evolves { height: auto; min-height: 0; padding: var(--m80) var(--m20) var(--m68); }
  .page--application-security .sec-application-security-evolves .o4s-evolves__inner {
    align-items: center; gap: var(--m60); text-align: center;
  }
  .page--application-security .sec-application-security-evolves .o4s-evolves__grid { align-items: center; width: 100%; gap: var(--m32); }
  .page--application-security .sec-application-security-evolves .o4s-evolves__item {
    align-items: center; width: 100%; gap: var(--m10); text-align: center;
  }
  .page--application-security .sec-application-security-evolves .o4s-evolves__title { font-size: var(--m28); line-height: 1.2; }
  .page--application-security .sec-application-security-evolves .o4s-evolves__desc { font-size: var(--m16); line-height: var(--m23); }
  .page--application-security .sec-application-security-evolves .o4s-evolves__tagline { font-size: var(--m18); line-height: var(--m26); text-align: center; }

  .page--application-security .sec-application-security-why-kobil { height: auto; min-height: 0; padding: var(--m80) var(--m12) var(--m60); gap: var(--m32); }
  .page--application-security .sec-application-security-why-kobil .os4a-why__top { align-items: center; gap: var(--m12); text-align: center; }
  .page--application-security .sec-application-security-why-kobil .os4a-why__heading { font-size: var(--m34); line-height: 1.2; }
  .page--application-security .sec-application-security-why-kobil .os4a-why__heading-line--accent { margin-bottom: 0; }
  .page--application-security .sec-application-security-why-kobil .os4a-why__subline { font-size: var(--m16); line-height: var(--m23); }
  .page--application-security .sec-application-security-why-kobil .os4a-why__grid { width: 100%; max-width: none; margin: 0; gap: var(--m24); }
  .page--application-security .sec-application-security-why-kobil .os4a-why__icon { width: var(--m48); height: var(--m48); margin-bottom: var(--m10); }
  .page--application-security .sec-application-security-why-kobil .os4a-why__item-title { font-size: var(--m14); line-height: var(--m20); }
  .page--application-security .sec-application-security-why-kobil .os4a-why__item-text { font-size: var(--m14); line-height: var(--m20); }

  .page--application-security .sec-application-security-faq { min-height: var(--m1028); padding: var(--m40) var(--m16); gap: var(--m28); }
  .page--application-security .sec-application-security-faq__title { font-size: var(--m24); line-height: var(--m32); }
  .page--application-security .sec-application-security-faq__list { margin-top: 0; }
  .page--application-security .sec-application-security-faq__trigger { min-height: var(--m63); padding: var(--m10) var(--m12); font-size: var(--m16); line-height: var(--m23); }

  .page--application-security .sec-application-security-cta {
    display: block; width: calc(100% + var(--m24)); min-height: var(--m572); margin-left: calc(-1 * var(--m12)); padding: 0;
  }
  .page--application-security .sec-application-security-cta__photo {
    top: -5.96%; left: -142.16%; width: 284.21%; height: 108.75%; object-fit: fill;
  }
  .page--application-security .sec-application-security-cta__scrim { display: none; }
  .page--application-security .sec-application-security-cta__content {
    position: absolute; top: var(--m69); left: var(--m24); gap: var(--m32); width: var(--m321); max-width: none;
  }
  .page--application-security .sec-application-security-cta__copy { gap: var(--m8); }
  .page--application-security .sec-application-security-cta__eyebrow { font-size: var(--m12); line-height: var(--m32); }
  .page--application-security .sec-application-security-cta__title { font-size: var(--m28); line-height: var(--m36); }
  .page--application-security .sec-application-security-cta__btn {
    height: var(--m40); padding: var(--m4) var(--m12) var(--m4) var(--m16); border-radius: var(--m32); font-size: var(--m14); line-height: var(--m18);
  }
}

@media (prefers-reduced-motion: reduce) {
  .page--application-security .as-steps__visual img,
  .page--application-security .as-protection__visual img { transition: none; }
}