/* ==========================================================================
   KOBIL — AI Trust — page chrome
   Figma: desktop 5501:34461 ("6-AI Trust", 1440 frame) · mobile 6087:13891
   (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.

   Unlike the Application Security / Secure Messenger pages this frame has no
   inset white card: the page is flush (`page--flush` from build.py) and each
   section carries its own 80px gutter — 28px on the phone frame, where the
   content column sits at x=12 and its inner padding is another 16.
   ========================================================================== */

.page--ai-trust {
  background: var(--white);
  /* The overview and features blooms are wider than the 1440 frame (Figma cuts
     them at the frame edge) and are meant to keep bleeding *down* into the
     next section — `clip` on one axis only does exactly that, without turning
     the page into a scroll container the way `hidden` would. */
  overflow-x: clip;
}

/* The brand gradient shared by every accented headline on this page
   (Figma: 1046CF 11% → 696EF5 16% → CA80F4 42% → FFC4A0 67%, ~90°). */
.ait-gradient-text {
  background-image: linear-gradient(
    90deg,
    #1046cf 11.229%,
    #696ef5 16.038%,
    #ca80f4 41.701%,
    #ffc4a0 67.364%
  );
  background-clip: text;
  -webkit-background-clip: text;
  color: #1046cf;
  -webkit-text-fill-color: transparent;
}

/* The hero's own accent runs a shorter, cooler ramp (Figma 5882:5530). */
.ait-gradient-text--hero {
  background-image: linear-gradient(
    90deg,
    #696ef5 13.354%,
    #849ff8 50.429%,
    #ca80f4 84.827%
  );
}

/* Section bloom (Figma: the "Vector" layer inside overview / features).
   Drawn in CSS rather than shipped as an SVG: Figma's SVG export of that
   layer bakes the page background behind it into the file (an opaque
   #cfcfcf/#f5f7fc/#fff stack), so both exports rendered as the same solid
   rectangle and the 100px blur was cut flat at the viewBox edge.

   Only the properties that are identical in both sections live here — this
   sheet is loaded last (extra_css_after), so anything set here would win over
   the per-section rules. Size, blur and offset therefore belong to
   overview.css / features.css, which also carry the phone-frame values.

   Geometry note: the wash measures 720 x 444 in the frame, not the
   762.386 x 685.854 the inspector reports for the node — that number is the
   unrotated box of a shape drawn at -44.699deg, so the rectangle here is the
   rotated result and takes no transform of its own. Both `top` and `left`
   are per-section (the two vectors sit differently over their diagrams) and
   must NOT be set here, or this sheet would override them. */
.ait-overview__glow,
.ait-features__glow {
  position: absolute;
  background: linear-gradient(
    90deg,
    #3ebffc 13.35%,
    #1046cf 32.36%,
    #696ef5 59.14%,
    #ca80f4 84.83%
  );
  opacity: 0.12;
  transform: translate(-50%, -50%);
  pointer-events: none;
}

/* Shared eyebrow tag (Figma component 5750:41633): 12/18 IBM Plex Mono in a
   box trimmed to its 8px cap height, hence the negative margin. */
.ait-tag {
  margin-bottom: calc(-1 * var(--w10));
  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);
}

@media (max-width: 768px) {
  .ait-tag {
    margin-bottom: calc(-1 * var(--m10));
    font-size: var(--m12);
    line-height: var(--m18);
  }
}