/* ==========================================================================
   KOBIL — SuperApp family: shared section chrome
   Loaded on both /superapp/ and /digital-workplace-superapp/ via the
   page's `extra_css` entry in build.py (these classes are used by several
   section stylesheets in this folder, so they can't live inside any one of
   them without making the others depend on that section being present).

   Figma: SuperApp 5501:33914 · D-Digital Workplace SuperApp 5501:33497.
   Every content section on both pages repeats the same three-part head —
   a mono "tag" label, a serif headline whose trailing clause is painted
   with a gradient, and a body lead — so it's defined once here.
   ========================================================================== */

/* ---- Section shell — in Figma both pages are one continuous 1440px-wide
   column: the section frames are contiguous (overview 0–700, numbers
   700–1120, approach 1120–1786, …), full-bleed, square-cornered, with no
   gaps between them. `.page` instead caps at 1440 *and* adds --page-pad
   side padding plus a --section-gap between children, so each section
   cancels all three — same breakout the net-new industry pages use for
   their `.page-surface--industry-flat` wrapper. ---- */

.sa-section {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  width: calc(100% + var(--page-pad) * 2);
  margin-left: calc(-1 * var(--page-pad));
  margin-top: calc(-1 * var(--section-gap));
  background: var(--sa-section-bg, var(--white));
}

/* The soft blue/violet wash behind the product renders — Figma's blurred
   "Vector" layer under each section's Image (e.g. 5839:36607 on /superapp/
   overview). On /superapp/ these are 1x Figma renders of the vector nodes
   (blur baked by Figma itself), flattened over white — legitimate because
   every .sa-section here keeps the default white background, and it makes
   the bloom byte-identical to the frame. The renders sit at their measured
   render-bounds boxes: each partial carries --glow-w/h (the render canvas)
   and --glow-dx/dy (render-box centre minus the Image frame's centre, from
   the section metadata + a correlation against the full-frame render).
   Separate phone renders (--glow-img-m and the *-m vars) exist because
   Figma's layer blur is 200px at BOTH scales, so the phone bloom is not a
   scaled copy of the desktop one.

   /digital-workplace-superapp/ uses the same measured-render scheme; only
   trusted-identity still uses the older SVG export with the heuristic
   default offsets below — the var() fallbacks keep it rendering
   unchanged.

   The wash is anchored to the illustration itself, not the section: in
   Figma the vector sits under the Image and spills past the section frame
   (clipsContent is off there), but `.sa-section` must clip — the same
   crop the Figma page produces where the neighbouring sections' white
   fills cover the spill. */
.sa-section--glow .sa-split__media,
.sa-section--glow .sec-sa-features__media {
  position: relative;
}

.sa-section--glow .sa-split__media::before,
.sa-section--glow .sec-sa-features__media::before {
  content: "";
  position: absolute;
  z-index: -1;
  left: calc(50% + var(--glow-dx, calc(-1 * var(--w140))));
  top: calc(50% + var(--glow-dy, var(--w100)));
  width: var(--glow-w, var(--w1162));
  height: var(--glow-h, var(--w1086));
  transform: translate(-50%, -50%);
  background: var(--glow-img) center / 100% 100% no-repeat;
  pointer-events: none;
}

@media (max-width: 768px) {
  .sa-section--glow .sa-split__media::before,
  .sa-section--glow .sec-sa-features__media::before {
    left: calc(50% + var(--glow-dx-m, 0px));
    top: calc(50% + var(--glow-dy-m, var(--m60)));
    width: var(--glow-w-m, calc(var(--glow-w, var(--m1162)) * 0.7));
    height: var(--glow-h-m, calc(var(--glow-h, var(--m1086)) * 0.7));
    background-image: var(--glow-img-m, var(--glow-img));
  }
}

/* Figma's own inset inside the 1440 frame is 80px on the sides; per-section
   vertical padding varies, so it's overridable. */
.sa-section__inner {
  position: relative;
  z-index: 1;
  max-width: var(--page-max);
  margin: 0 auto;
  padding: var(--sa-section-pad, var(--w80));
}

/* ---- Section head ---- */

.sa-head {
  display: flex;
  flex-direction: column;
  gap: var(--w32);
  max-width: var(--head-max, 100%);
}

.sa-tag {
  font-family: var(--font-mono);
  font-size: var(--w12);
  font-weight: 500;
  line-height: var(--w18);
  letter-spacing: 0.48px;
  text-transform: uppercase;
  color: var(--navy-70);
}

.sa-head__text {
  display: flex;
  flex-direction: column;
  gap: var(--w16);
}

.sa-title {
  font-family: var(--font-serif);
  font-weight: 400;
  font-size: var(--w56);
  line-height: 1.3;
  color: var(--navy);
}

/* The gradient clause. Two named gradients are in play across the two
   pages (Figma 5501:33938 vs 5501:33559 — the second one starts on a
   lighter cyan); the default is the /superapp/ one and the other is set
   per section via --title-gradient. */
.sa-title__accent {
  background-image: var(
    --title-gradient,
    linear-gradient(
      90deg,
      #1046cf 11.229%,
      #696ef5 16.038%,
      #ca80f4 41.701%,
      #ffc4a0 67.364%
    )
  );
  -webkit-background-clip: text;
  background-clip: text;
  color: #696ef5;
  -webkit-text-fill-color: transparent;
  /* background-clip:text paints only inside the element's own box, and
     these headlines run a line-height tighter than their glyphs — without
     this the descenders of "Anything." / "Your Rules." fall outside the
     painted box and vanish. Cancelled by the negative margin so the extra
     paint area costs no layout height. */
  padding-bottom: 0.18em;
  margin-bottom: -0.18em;
}

.sa-lead {
  font-family: var(--font-sans);
  font-size: var(--w16);
  font-weight: 400;
  line-height: var(--w23);
  color: var(--navy-70);
}

/* ---- Figma-fixed line breaks. The desktop and phone frames break some
   headlines in different places (e.g. DWS overview: "One Identity." alone
   on line 1 only on desktop; SuperApp benefits: two lines only on the
   phone), so the <br> itself is toggled per breakpoint. ---- */

.sa-br--mobile {
  display: none;
}

@media (max-width: 768px) {
  .sa-br--desktop {
    display: none;
  }

  .sa-br--mobile {
    display: inline;
  }

  /* On the phone frames some accents drop their gradient: SuperApp
     overview/showcase paint the clause flat #1046CF (6087:53368,
     6087:53694); SuperApp benefits paints it plain navy (6087:53575). */
  .sa-title__accent--m-blue {
    background-image: none;
    color: #1046cf;
    -webkit-text-fill-color: #1046cf;
  }

  .sa-title__accent--m-navy {
    background-image: none;
    color: var(--navy);
    -webkit-text-fill-color: var(--navy);
  }
}

/* ---- Split layout: head on the left, a product render on the right.
   Both pages use it twice (Overview and Approach), always in that
   order, so it lives here rather than in either section's stylesheet.

   The renders are deep Figma stacks — phone chrome, app grids, floating
   payment/chat/signature cards, a desktop dashboard — i.e. illustration
   of the product rather than UI this site ships, so each is exported flat
   as one image instead of being rebuilt in markup. ---- */

.sa-split {
  display: grid;
  grid-template-columns: minmax(0, var(--copy-col, var(--w565))) minmax(0, 1fr);
  align-items: center;
  gap: var(--split-gap, var(--w56));
  min-height: var(--split-min-h, var(--w540));
}

.sa-split__media {
  justify-self: end;
  /* --media-w frees the box from the grid track when Figma's Image frame is
     wider than the 1fr column (DWS overview: 719px visual box vs a 659px
     track); the overflow toward the copy column is transparent asset
     padding. */
  width: var(--media-w, 100%);
  max-width: var(--media-max, var(--w505));
  /* Figma does not pin every Image frame to the 80px gutter: on /superapp/
     overview it stops 124px short of it (frame x 731..1236), approach 101,
     features 40 — and the DWS overview render BLEEDS 20px past it (its
     drop shadows spill right of the frame box), hence a negative inset
     there. --media-mt drops a composition Figma sits below the vertical
     centre (DWS overview: asset centre 50px under the section centre —
     centring plus a 100px top margin shifts it by exactly that). */
  margin-right: var(--media-mr, 0);
  margin-top: var(--media-mt, 0);
}

.sa-split__media img {
  display: block;
  width: 100%;
  height: auto;
}

/* --------------------------------------------------------------------------
   Responsive — Figma's phone frames (393px wide, 337px inner content) keep
   the same three-part head, just at a smaller ramp: tag 12/18 but with
   noticeably wider tracking (4px, not 0.48px), headline 34px, lead 14/20.
   -------------------------------------------------------------------------- */

@media (max-width: 768px) {
  .sa-section__inner {
    padding: var(--sa-section-pad-sm, var(--m40) var(--m16));
  }

  .sa-head {
    gap: var(--m24);
    max-width: 100%;
  }

  .sa-tag {
    letter-spacing: 4px;
  }

  .sa-title {
    font-size: var(--m34);
    line-height: 1.2;
  }

  .sa-lead {
    font-size: var(--m14);
    line-height: var(--m20);
  }

  .sa-split {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--m40);
    min-height: 0;
  }

  .sa-split__media {
    justify-self: center;
    width: 100%;
    max-width: min(var(--media-max, var(--w505)), 100%);
    margin-right: 0;
    margin-top: 0;
  }
}