/* ==========================================================================
   KOBIL — AI Trust — Section: Overview
   Figma: desktop 5501:34481 (1440x700 — copy 565 wide at x=80/y=189.5,
   diagram 720x698 at x=680/y=1, bloom 1025x1023 at x=493/y=384) ·
   mobile 6087:13894 (369x699 — copy 337 then the diagram 369x372 below it).
   ========================================================================== */

.sec-ait-overview {
  position: relative;
  display: flex;
  align-items: center;
  width: 100%;
  min-height: var(--w700);
  padding: 0 var(--w80);
}

/* The diagram and its bloom share one box, so "the bloom sits behind the
   diagram" holds at every breakpoint without a second set of coordinates. */
.ait-overview__figure {
  position: absolute;
  top: var(--w1);
  left: var(--w680);
  width: var(--w720);
  height: var(--w698);
  margin: 0;
}

/* The wash measures 720 x 444 in the frame (see _page.css) and sits just
   right of and below the diagram's centre — measured against the render of
   5501:34481, since Figma's x/y for the vector is its unrotated origin and
   lands it a section too low. */
.ait-overview__glow {
  top: calc(50% + var(--w16));
  left: calc(50% - var(--w28));
  width: var(--w720);
  height: var(--w444);
  border-radius: var(--w100);
  filter: blur(var(--w100));
}

.ait-overview__copy {
  position: relative;
  z-index: 1;
  flex: none;
  display: flex;
  flex-direction: column;
  gap: var(--w32);
  width: var(--w565);
}

.ait-overview__head {
  display: flex;
  flex-direction: column;
  gap: var(--w16);
}

.ait-overview__title {
  display: flex;
  flex-direction: column;
  font-family: var(--font-serif);
  font-size: var(--w56);
  font-weight: 400;
  line-height: 1.3;
  color: var(--navy);
}

.ait-overview__title span { display: block; }

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

/* The phone artwork is a separate file, so the <img> is wrapped in a
   <picture> — lifted out of the flow the same way the features one is. */
.ait-overview__figure picture { display: contents; }

.ait-overview__visual {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: contain;
}

@media (max-width: 768px) {
  .sec-ait-overview {
    flex-direction: column;
    align-items: stretch;
    min-height: 0;
    padding: var(--m40) var(--m28);
  }

  .ait-overview__glow {
    /* The phone frame re-draws the same vector taller and narrower than the
       desktop one (it is not the 1440 shape scaled down), so these are its
       own measurements, taken off 6087:13891. */
    top: calc(50% + var(--m13));
    left: calc(50% + var(--m16));
    width: var(--m352);
    height: var(--m384);
    border-radius: var(--m50);
    filter: blur(var(--m50));
  }

  .ait-overview__copy { width: 100%; gap: var(--m16); }
  /* The phone frame runs the first two lines as one wrapped paragraph. */
  .ait-overview__title { display: block; }
  .ait-overview__title span { display: inline; }
  .ait-overview__title .ait-gradient-text { display: block; }
  .ait-overview__head { gap: var(--m8); }
  .ait-overview__title { font-size: var(--m34); line-height: 1.2; }
  .ait-overview__lead { font-size: var(--m14); line-height: var(--m20); }

  /* Figma's phone image frame (6087:13903) is 369 wide at x=12 — it breaks
     out of the 337 content column by 16 either side, but not to the frame
     edge — and 372 tall, 32 under the copy. */
  .ait-overview__figure {
    position: relative;
    top: auto;
    left: auto;
    width: calc(100% + var(--m32));
    height: var(--m372);
    margin: var(--m32) calc(-1 * var(--m16)) 0;
  }

  /* The phone frame draws a different composition, not the desktop diagram
     scaled: bigger badges, a taller shield. Its export runs 15 past the
     bottom of the image frame (drop shadows), so the artwork is pinned to
     the top-left at its own aspect and allowed to overhang. */
  .ait-overview__visual {
    inset: auto;
    top: 0;
    left: 0;
    width: 100%;
    height: auto;
    object-fit: fill;
    pointer-events: none;
  }
}