/* ==========================================================================
   KOBIL — /secure-payments/ page-specific styles.
   Figma: 4-Secure Payments 6019:106707 (desktop 1440x6463) and
   6151:74773 (mobile 393x7659).

   Reuses the SuperApp pages' shared chrome (sa-section head, showcase
   tabs, faq, cta). Unique to this page: the dark gradient hero with a
   floating phone render, and the WHITE ROUNDED SURFACE the content
   sections sit on — Figma draws one 1360px card starting at y:766 that
   overlaps the hero's 1290px-tall gradient. Sections between overview and
   the FAQ carry .sp-card to form that continuous surface.
   ========================================================================== */

/* ---- Page ground. Sampling the Figma frame down its 40px edge strips
   (x=8/x=25) gives the hero gradient fading out — 226,186,172 at y:700 →
   pure white by y:1200 — and then #ffffff for the entire rest of the page.
   So this page's ground is white, not the site's --navy-20; that grey was
   what showed beside the content card all the way down. ---- */

.page--secure-payments {
  background: var(--white);
}

/* ---- Hero (6019:106709) ---- */

.sec-sp-hero {
  position: relative;
  /* Its own stacking context: the gradient below is painted by a z-index:-1
     ::before, which would otherwise fall behind `.page`'s white background
     and disappear entirely. Isolating the hero keeps that -1 local. */
  isolation: isolate;
  width: calc(100% + var(--page-pad) * 2);
  margin-left: calc(-1 * var(--page-pad));
  margin-top: calc(-1 * var(--w100));
  /* Figma: the hero FRAME is 1208 tall but its background frame
     (6019:106710) runs to 1290 — it keeps going behind the overview card
     and fades to white, which is what shows in the 40px strips either side
     of that card. So the gradient is painted by ::before (1290 tall, not
     clipped by the section box) while the section itself only claims its
     1208 of layout height. */
  min-height: var(--w1208);
}

.sec-sp-hero::before {
  content: "";
  position: absolute;
  z-index: -1;
  left: 0;
  right: 0;
  top: 0;
  /* The export is 1440x1208 and its gradient already fades to pure white
     over its last ~70px, so it is painted 1:1 (`100% 100%`, no cover-crop)
     at exactly that height: the tail lands on white and the strips beside
     the overview card meet the page background seamlessly. Scaling it to
     the 1290 background-frame height instead pushed a still-tinted row to
     the cut-off and produced a visible line. */
  height: var(--w1290);
  background: var(--hero-bg) center top / 100% var(--w1208) no-repeat, var(--white);
  pointer-events: none;
}

/* Figma places the two blocks so that they OVERLAP: the title box runs
   x:80–844 and the phone render starts at x:745 (its left third is empty
   space around the card). A flex row with space-between can't express
   that — it shrank the title column to 566px, which broke "One Identity.
   One Tap." onto three lines — so the render is absolutely positioned at
   its Figma coordinates and the copy keeps the full 764px column. */
.sec-sp-hero__inner {
  position: relative;
  max-width: var(--page-max);
  margin: 0 auto;
  padding: var(--w246) var(--w80) 0;
}

.sec-sp-hero__content {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  /* Figma: title frame 6019:106715 is 764 wide. */
  max-width: var(--w764);
}

.sec-sp-hero__crumbs {
  display: flex;
  align-items: center;
  gap: var(--w12);
  font-family: var(--font-mono);
  font-size: var(--w11);
  font-weight: 500;
  line-height: var(--w24);
  letter-spacing: 2.04px;
  text-transform: uppercase;
  color: var(--white);
}

.sec-sp-hero__crumb-link {
  color: inherit;
  transition: opacity 0.2s var(--ease);
}

.sec-sp-hero__crumb-link:hover {
  opacity: 0.75;
}

.sec-sp-hero__crumb-dot {
  flex: 0 0 auto;
  width: var(--w3);
  height: var(--w3);
  border-radius: 50%;
  background: currentColor;
}

.sec-sp-hero__title {
  margin-top: var(--w24);
  font-family: var(--font-serif);
  font-weight: 400;
  font-size: var(--w82);
  line-height: 1.3;
  color: var(--white);
}

.sec-sp-hero__desc {
  margin-top: var(--w16);
  /* Figma's own text box is 568 wide; widened to the title column so the
     sentence breaks later and the block reads less cramped. */
  max-width: var(--w700);
  font-family: var(--font-sans);
  font-size: var(--w20);
  font-weight: 400;
  line-height: var(--w26);
  color: var(--white);
}

/* White pill on the gradient (Figma Button Variant, navy label). */
.sec-sp-hero__cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--w8);
  margin-top: var(--w48);
  height: var(--w56);
  padding: var(--w8) var(--w20) var(--w8) var(--w24);
  background: var(--white);
  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);
}

.sec-sp-hero__cta:hover {
  background: var(--navy-20);
}

/* Figma 6019:106724: x:745, y:192, 674x465 inside the 1440 frame. */
.sec-sp-hero__media {
  position: absolute;
  left: var(--w745);
  top: var(--w192);
  width: var(--w674);
}

.sec-sp-hero__media img {
  display: block;
  width: 100%;
  height: auto;
}

/* ---- The white content area. Figma (frame 2087325813) draws it as one
   1360px card at x:40 whose top edge — rounded, at y:766 — belongs to the
   OVERVIEW section; the hero gradient runs on behind it. So:

   1. Overview is that card: page-width (1360 inside `.page`), rounded top,
      pulled up over the hero. It must NOT use `.sa-section`'s breakout.
   2. From the showcase down to the FAQ, build.py wraps the sections in
      `.page-surface--overlap` (the /technologies/application-security/
      mechanism): full-bleed white with its own 40px gutter, so no page
      background shows beside them. Its base pull-up and radius are
      cancelled here — both now live on the overview card above it.
   ---- */

#secure-payments-overview {
  position: relative;
  z-index: 1;
  width: 100%;
  margin-left: 0;
  /* Figma: card top at y:766 over the 1208-tall hero → 442 up, plus
     `.page`'s own 20px row gap. */
  margin-top: calc(-1 * (var(--w442) + var(--section-gap)));
  background: var(--white);
  border-radius: var(--w24) var(--w24) 0 0;
}

#secure-payments-overview + .page-surface--overlap {
  /* Figma keeps the white area 1360 wide all the way down (frame
     2087325813) — the base variant is full-bleed, which sliced across the
     hero gradient still showing beside the overview card. Same width as the
     card, so the two read as one continuous surface and the strips fade
     out on their own. */
  width: 100%;
  margin-left: 0;
  margin-top: calc(-1 * var(--section-gap));
  /* No gutter of its own — the sections' own 40px inner padding is what
     puts their content at Figma's x:80 (page pad 40 + card inset 40). */
  padding: 0;
  border-radius: 0;
}

.page-surface--overlap > .sa-section {
  width: 100%;
  margin-left: 0;
  margin-top: 0;
}


/* ---- Overview (6019:106758): head left, lead right. ---- */

.sec-sp-overview {
  display: grid;
  grid-template-columns: minmax(0, var(--w572)) minmax(0, var(--w608));
  justify-content: space-between;
  gap: var(--w40);
}

.sec-sp-overview__lead {
  padding-top: var(--w48);
}

/* Figma paints the accent with the standard 4-stop ramp across the WHOLE
   572px title box; "Future" samples the 18–50% span of it. */
.sec-sp-overview__accent {
  background: linear-gradient(90deg, #1046cf -58%, #696ef5 21%, #ca80f4 94%, #ffc4a0 166%);
  -webkit-background-clip: text;
  background-clip: text;
  color: #696ef5;
  -webkit-text-fill-color: transparent;
}

/* ---- Split feature blocks (Revolutionize / AI at the Core) ---- */

/* Figma 6019:110854: the image frame is a fixed 527x430 at the card's right
   edge; letting it share `1fr` with the copy column shrank it to 473. */
@media (min-width: 769px) {
  #secure-payments-split .sa-split {
    grid-template-columns: minmax(0, 1fr) var(--w527);
    column-gap: var(--w16);
  }

  #secure-payments-split .sa-split__media {
    width: var(--w527);
    max-width: none;
  }

  #secure-payments-split .sa-split__media img {
    height: var(--w430);
    object-fit: contain;
  }
}

.sec-sp-split__copy {
  display: flex;
  flex-direction: column;
  gap: var(--w40);
}

.sec-sp-split__list {
  display: flex;
  flex-direction: column;
  gap: var(--w28);
  max-width: var(--w541);
}

.sec-sp-split__item dt {
  font-family: var(--font-sans);
  font-size: var(--w18);
  font-weight: 600;
  line-height: var(--w26);
  color: var(--navy);
}

.sec-sp-split__item dd {
  margin: var(--w4) 0 0;
  font-family: var(--font-sans);
  font-size: var(--w16);
  font-weight: 400;
  line-height: var(--w23);
  color: var(--navy-70);
}

.sec-sp-ai__accent {
  color: #1046cf;
}

.sec-sp-ai__img {
  border-radius: var(--w24);
}

/* ---- Showcase / steps (FeatureTabs/4 Payment 6019:110580; phone
   6152:75859). One DOM order serves both breakpoints: each row is paired
   with its own shot inside a `display: contents` wrapper, so on desktop the
   rows land in column 1 and every shot stacks in column 2 (only the active
   one visible), while on the phone the pairs simply flow as card + image.
   ---- */

@media (min-width: 769px) {
  /* Figma's instance is 1220 wide (578 rows + 115 gap + 527 image) inside a
     1280 content area — the 60px slack sits on the RIGHT. */
  #secure-payments-showcase .sec-sp-steps {
    position: relative;
    display: grid;
    grid-template-columns: var(--w578);
    align-content: center;
    /* The shared panel sets `gap: var(--w115)`, which applies to ROWS as
       well — that 115px between the three rows was the huge spacing. Figma
       (6019:110580) has 24: rows at y73/174/281, each ~78 tall, the block
       285 tall centred inside the 430 instance. */
    row-gap: var(--w24);
    min-height: var(--w430);
    max-width: var(--w1220);
  }

  #secure-payments-showcase .sec-sp-steps__item {
    display: contents;
  }

  #secure-payments-showcase .sec-sp-steps .sec-sa-showcase__row {
    grid-column: 1;
  }

  /* Absolute, not a spanning grid item: as a grid item the shot's 430px
     height was forced onto the row track it sat in (grid-row: 1 / -1
     resolves against the EXPLICIT grid, which has no rows here), which blew
     the first row up to 430px and left huge gaps between the rows. */
  .sec-sp-steps .sec-sa-showcase__shot {
    position: absolute;
    top: 50%;
    left: calc(var(--w578) + var(--w115));
    transform: translateY(-50%);
    width: var(--w527);
    height: var(--w430);
    object-fit: contain;
    object-position: center;
  }
}

@media (max-width: 768px) {
  /* Phone frame: title + copy + image per card, all three cards visible,
     no dividers and no arrows (6152:75859). */
  #secure-payments-showcase .sec-sp-steps {
    display: flex;
    flex-direction: column;
    gap: var(--m12);
  }

  #secure-payments-showcase .sec-sp-steps__item {
    display: flex;
    flex-direction: column;
    gap: var(--m20);
  }

  .sec-sp-steps .sec-sa-showcase__row {
    border-bottom: 0;
    padding: var(--m12) 0 0;
    cursor: default;
  }

  .sec-sp-steps .sec-sa-showcase__row-arrow {
    display: none;
  }

  .sec-sp-steps .sec-sa-showcase__row-title {
    font-size: var(--m20);
    line-height: var(--m26);
  }

  /* Every title stays navy — the phone frame has no selected state. */
  .sec-sp-steps .sec-sa-showcase__row.is-active .sec-sa-showcase__row-title {
    color: var(--navy);
  }

  /* The shots are the full 527x430 desktop frames (their glow fades out
     well inside the frame, so nothing needs trimming); width from the
     phone column, height follows the 527:430 aspect. */
  .sec-sp-steps .sec-sa-showcase__shot {
    position: static;
    width: var(--m337);
    height: auto;
    max-width: 100%;
    opacity: 1;
  }
}

/* ---- Compliance (6019:107108) ---- */

.sec-sp-compliance {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.sec-sp-compliance__lead {
  margin-top: var(--w20);
  max-width: var(--w696);
}

.sec-sp-compliance__badges {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--w24);
  margin-top: var(--w60);
}

.sec-sp-compliance__badges img {
  display: block;
  height: auto;
  max-width: 100%;
}

/* ---- Why KOBIL (6019:107141) ---- */

.sec-sp-why__list {
  display: flex;
  flex-direction: column;
  gap: var(--w30);
  align-self: center;
  max-width: var(--w580);
}

.sec-sp-why__item {
  display: flex;
  align-items: flex-start;
  gap: var(--w12);
  font-family: var(--font-sans);
  font-size: var(--w18);
  font-weight: 400;
  line-height: var(--w26);
  color: var(--navy);
}

.sec-sp-why__check {
  flex: 0 0 auto;
  width: var(--w16);
  height: var(--w16);
  margin-top: var(--w5);
}

/* --------------------------------------------------------------------------
   Responsive — phone frame 6151:74773.
   -------------------------------------------------------------------------- */

@media (max-width: 768px) {
  .sec-sp-hero {
    margin-top: calc(-1 * var(--m68));
    min-height: var(--m847);
  }

  .sec-sp-hero__inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--m24);
    padding: var(--m116) var(--m32) 0;
  }

  .sec-sp-hero__content {
    align-items: center;
    text-align: center;
    max-width: var(--m329);
  }

  .sec-sp-hero__crumbs {
    font-size: var(--m12);
    line-height: var(--m18);
  }

  .sec-sp-hero__title {
    margin-top: var(--m20);
    font-size: var(--m34);
    line-height: 1.25;
  }

  .sec-sp-hero__desc {
    margin-top: var(--m12);
    font-size: var(--m14);
    line-height: var(--m20);
  }

  .sec-sp-hero__cta {
    margin-top: var(--m24);
    height: var(--m40);
    padding: var(--m4) var(--m12) var(--m4) var(--m16);
    font-size: var(--m14);
  }

  /* The phone frame stacks the render under the copy and gives it its own
     289x292 box (6151:74792) — a squarer composition than the desktop
     674x465, so the height is pinned rather than derived. */
  .sec-sp-hero__media {
    position: static;
    width: var(--m289);
    height: var(--m292);
    margin-top: var(--m40);
  }

  .sec-sp-hero__media img {
    height: 100%;
    object-fit: contain;
  }



  .sec-sp-overview {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--m24);
  }

  .sec-sp-overview__lead {
    padding-top: 0;
  }

  /* Figma mobile: the content card sits at x:12 and its own inset is 16. */
  #secure-payments-overview {
    margin-top: calc(-1 * (var(--m122) + var(--section-gap)));
    border-radius: var(--m24) var(--m24) 0 0;
  }

  #secure-payments-overview + .page-surface--overlap {
    padding: 0;
  }

  #secure-payments-overview .sa-section__inner,
  .page-surface--overlap .sa-section__inner {
    padding: var(--m40) var(--m12);
  }

  .sec-sp-hero::before {
    /* Phone export is 393x847 (shipped at 3x) and fades to white over its last
       ~40px. `background-size` HAS to be restated here: the desktop shorthand
       above sets it to `100% var(--w1208)`, and below 768 `--w1208` resolves on
       the phone ramp to 1208px — so the 847-tall gradient was being stretched to
       1208 and then cut off by this box at 847, i.e. at 70% of the image, where
       it is still tinted. That cut is the hard line that showed in the strips
       beside the overview card.
       Painted 1:1 at its own height instead, with the box running to the 1037 of
       Figma's phone background frame (6151:74775) — the same arrangement as the
       desktop rule: the image's white tail lands inside the box and the rest is
       the white layer, so there is no edge to see. */
    height: var(--m1037);
    background-image: var(--hero-bg-mobile, var(--hero-bg));
    background-size: 100% var(--m847);
  }

  /* Phone frame: 337x262 image box (6151:75216). */
  .sec-sp-split .sa-split__media,
  #secure-payments-split .sa-split__media {
    width: var(--m337);
    max-width: 100%;
  }

  #secure-payments-split .sa-split__media img {
    height: auto;
  }

  .sec-sp-split__list {
    gap: var(--m24);
  }

  .sec-sp-split__item dt {
    font-size: var(--m16);
    line-height: var(--m23);
  }

  .sec-sp-split__item dd {
    font-size: var(--m14);
    line-height: var(--m20);
  }

  .sec-sp-compliance__badges {
    gap: var(--m20);
    margin-top: var(--m40);
  }

  .sec-sp-why__list {
    gap: var(--m20);
    align-self: flex-start;
  }

  .sec-sp-why__item {
    font-size: var(--m16);
    line-height: var(--m23);
  }

}