/* ==========================================================================
   KOBIL — Technology / Secure Messenger & Documents — page chrome
   Figma: desktop 6015:101482 (1440 frame) · mobile 6149:69274 (393 frame)

   Every number on this page is a Figma number:
     var(--wN)  = N px measured on the 1440 desktop frame
     var(--mN)  = N px measured on the 393 phone frame
   Both scale linearly with the viewport (see css/fluid.css, generated by
   build.py). Below 768px --wN is remapped onto the phone ramp, so a desktop
   rule that a ≤768 block does not override still reads at phone scale.

   This sheet only carries what belongs to the page as a whole: the 40px
   page gutter, the full-bleed hero, and the white content card that
   overlaps it. Everything else lives in the per-section sheets.
   ========================================================================== */

.page--secure-messenger-documents {
  --page-pad: var(--w40);
  padding: 0 var(--page-pad);
  gap: 0;
  /* Figma's page behind the inset card is white, not the site's default
     System/20% — the only place it shows is the 40px gutter beside the card. */
  background: var(--white);
}

/* The hero breaks back out to the full 1440 page width; the white card that
   follows provides the 40px inset instead (Figma: Frame 2087325757 sits at
   x=40 / y=766 against a 1208-tall hero → 442px of overlap).

   Unlike the sibling Application Security page the card stays inset here:
   Figma keeps the 40px gutters open so the tail of the hero gradient is
   still visible beside the card until the hero's background runs out. */
.page--secure-messenger-documents .page-surface--overlap {
  width: 100%;
  margin-left: 0;
  padding: 0;
  margin-top: calc(-1 * var(--w442));
  border-radius: var(--w12) var(--w12) 0 0;
}

/* The brand gradient used by every accented headline on this page
   (Figma: 3EBFFC → 1046CF → 696EF5 → CA80F4 → FFC4A0, ~90°). Applied via
   background-clip so the stops keep their Figma positions across the run
   of text rather than per line box. */
.smd-gradient-text {
  background-image: linear-gradient(
    90deg,
    #3ebffc 3%,
    #1046cf 13%,
    #696ef5 41%,
    #ca80f4 64%,
    #ffc4a0 99%
  );
  background-clip: text;
  -webkit-background-clip: text;
  color: #1046cf;
  -webkit-text-fill-color: transparent;
}

@media (max-width: 768px) {
  body:has(.page--secure-messenger-documents) .site-header { padding-top: var(--m16); }

  .page--secure-messenger-documents { --page-pad: var(--m12); }

  .page--secure-messenger-documents .page-surface--overlap {
    margin-top: calc(-1 * var(--m122));
    border-radius: var(--m12) var(--m12) 0 0;
  }
}