/* ==========================================================================
   KOBIL — AI Trust — Section: Core capabilities
   Figma: desktop 5501:34666 (1440x700 — copy 611 wide at x=80/y=73 with the
   507-wide accordion at y=168, diagram 646x530 at x=674/y=80, bloom
   1025x1023 at x=536.6/y=325.7) · mobile 6087:14069 (369 — head, then the
   diagram, then every item expanded).
   ========================================================================== */

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

/* Same vector as the overview bloom, with this section's own placement
   (shared bits in _page.css). */
.ait-features__glow {
  top: calc(50% - var(--w35));
  left: calc(50% + var(--w69));
  width: var(--w720);
  height: var(--w444);
  border-radius: var(--w100);
  filter: blur(var(--w100));
}

/* Diagram + bloom in one box — see overview.css for why Figma's raw vector
   coordinates are not usable here. */
.ait-features__figure {
  position: absolute;
  top: var(--w80);
  left: var(--w674);
  width: var(--w646);
  height: var(--w530);
  margin: 0;
}

.ait-features__copy {
  position: relative;
  z-index: 1;
  flex: none;
  display: flex;
  flex-direction: column;
  gap: var(--w24);
  width: var(--w611);
}

.ait-features__head {
  display: flex;
  flex-direction: column;
  gap: var(--w24);
}

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

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

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

/* ---- Accordion (Figma 5501:34677) ---- */

.ait-features__list {
  display: flex;
  flex-direction: column;
  width: var(--w507);
  max-width: 100%;
  margin: 0;
  padding: 0;
  list-style: none;
}

/* Hairlines sit between the collapsed rows and after the last one, and must
   not add height (Figma draws them as zero-height vectors). */
.ait-features__item { position: relative; cursor: pointer; }

.ait-features__item + .ait-features__item::before,
.ait-features__item:last-child::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  height: 1px;
  background: var(--navy-40);
  pointer-events: none;
}

.ait-features__item + .ait-features__item::before { top: 0; }
.ait-features__item:last-child::after { bottom: 0; }

/* The open row loses its hairline and gains the System/10% panel. */
.ait-features__item.is-open + .ait-features__item::before,
.ait-features__item.is-open::before { display: none; }

.ait-features__q { margin: 0; }

.ait-features__trigger {
  display: block;
  width: 100%;
  padding: var(--w16);
  border: 0;
  border-radius: var(--w2);
  background: none;
  text-align: left;
  font-family: var(--font-sans);
  font-size: var(--w16);
  font-weight: 600;
  line-height: var(--w23);
  color: var(--navy-80);
  cursor: pointer;
  transition: color var(--dur) var(--ease), padding 0.3s var(--ease);
}

.ait-features__trigger:hover { color: var(--blue); }

.ait-features__trigger:focus-visible {
  outline: 2px solid var(--blue);
  outline-offset: -2px;
  border-radius: var(--w2);
}

.ait-features__item.is-open .ait-features__trigger { padding: var(--w12) var(--w16) 0; }

.ait-features__item.is-open {
  border-radius: var(--w2);
  background: #f9fafd;
}

.ait-features__panel {
  display: grid;
  grid-template-rows: 0fr;
  visibility: hidden;
  transition: grid-template-rows 0.3s var(--ease), visibility 0.3s;
}

.ait-features__item.is-open .ait-features__panel {
  grid-template-rows: 1fr;
  visibility: visible;
}

.ait-features__panel-inner {
  overflow: hidden;
  min-height: 0;
}

.ait-features__text {
  margin: 0;
  padding: var(--w4) var(--w16) var(--w12);
  font-family: var(--font-sans);
  font-size: var(--w14);
  font-weight: 400;
  line-height: var(--w20);
  color: var(--navy-80);
}

.ait-features__figure picture { display: contents; }

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

@media (max-width: 768px) {
  .sec-ait-features {
    flex-direction: column;
    align-items: stretch;
    min-height: 0;
    /* Figma 6087:14069 stacks head → diagram → list, 32 apart. */
    gap: var(--m32);
    padding: var(--m40) var(--m28) var(--m40);
  }

  /* No separate bloom on the phone frame: Figma keeps it inside the image
     layer (6087:14076 within 6087:14075), and that whole layer is what the
     <picture> above serves here. */
  .ait-features__glow { display: none; }

  /* The 611-wide desktop column dissolves on the phone frame so the diagram
     can sit *between* the head and the list, which is the order Figma uses
     (6087:14075 above 6087:14104) — `display: contents` lifts the head and
     the list into the section's own flex flow so all three can be ordered. */
  .ait-features__copy { display: contents; }
  .ait-features__head { order: 1; gap: var(--m16); }
  .ait-features__headings { gap: var(--m8); }
  .ait-features__title { font-size: var(--m34); line-height: 1.2; }
  .ait-features__lead { font-size: var(--m14); line-height: var(--m20); }

  /* Diagram under the lead. Unlike the overview and approach diagrams this
     one is NOT full-bleed — Figma keeps it inside the 337 content column
     (6087:14075 at x=0 of the inset frame). The 32 above it is the section's
     own gap, so the element carries no margin of its own. */
  .ait-features__figure {
    order: 2;
    position: relative;
    top: auto;
    left: auto;
    width: var(--m337);
    height: var(--m373);
    margin: 0;
  }

  /* 6087:14075 re-exported at 3x (2026-08 refresh) and un-matted to real
     alpha — the earlier pngquant palette turned the wash into contour rings.
     The render's visible canvas is 393 x 1469.7 css px and Figma's 337x373
     image box sits at (27.5, 547.1) inside it (measured by correlating the
     old and new canvases), so the artwork is placed by that offset at 1:1
     scale rather than fitted to the box — which keeps the bloom bleeding
     out of the box exactly as the phone frame renders it. Transparent
     everywhere else and ignores the pointer, so the copy it overlaps stays
     selectable. left/top/width = -27.5/337, -547.1/373, 393/337. */
  .ait-features__visual {
    inset: auto;
    top: -146.68%;
    left: -8.16%;
    width: 116.62%;
    height: auto;
    object-fit: fill;
    pointer-events: none;
  }

  .ait-features__list { order: 3; width: 100%; }

  /* Every item is expanded on the phone frame, and the panel is plain. */
  .ait-features__item,
  .ait-features__item.is-open { background: none; border-radius: 0; }
  .ait-features__item + .ait-features__item::before { display: block; top: 0; }

  .ait-features__trigger,
  .ait-features__item.is-open .ait-features__trigger {
    padding: var(--m12) 0 0;
    cursor: default;
    pointer-events: none;
  }

  .ait-features__panel {
    grid-template-rows: 1fr;
    visibility: visible;
  }

  .ait-features__text { padding: var(--m4) 0 var(--m12); }
}

@media (prefers-reduced-motion: reduce) {
  .ait-features__trigger,
  .ait-features__panel { transition: none; }
}