/* ==========================================================================
   AI Trust — Features (accordion + platform diagram)
   Figma: jhD6LDVa0CfkUz8tixyG7B / 16645:22282 (frame 1360x700; white card 690,
   the 10px strip below is the inter-section gap handled by base.css)
   ========================================================================== */

.sec-ai-trust-features {
  position: relative;
  background: var(--white);
  border-radius: 12px;
  overflow: hidden;
}

/* Soft blue haze behind the diagram (rendered blur from Figma) */
.sec-ai-trust-features__glow {
  position: absolute;
  top: 0;
  right: 0;
  width: 1223px;
  height: 690px;
  max-width: none;
  pointer-events: none;
  user-select: none;
  z-index: 0;
}

/* Chamfered bottom-right corner (page background shows through) */
.sec-ai-trust-features::after {
  content: "";
  position: absolute;
  right: 0;
  bottom: 0;
  width: 71.4px;
  height: 85.3px;
  background: url("/assets/products/ai-trust/features/corner-cut.svg") no-repeat bottom right / 100% 100%;
  pointer-events: none;
  z-index: 1;
}

.sec-ai-trust-features__inner {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 23px;
  min-height: 690px;
  padding: 48px 40px;
}

/* ---- Copy column ---- */

.sec-ai-trust-features__copy {
  display: flex;
  flex-direction: column;
  gap: 24px;
  flex: 0 1 611px;
  min-width: 0;
  margin-top: 10px; /* Figma: copy top y=68 in the 690px card (centered on the 700px frame) */
}

.sec-ai-trust-features__head {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.sec-ai-trust-features__eyebrow {
  gap: 10px;
  letter-spacing: 0.48px;
  color: var(--navy-70);
}

.sec-ai-trust-features__eyebrow::before {
  width: 12px;
  height: 12px;
}

.sec-ai-trust-features__text {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.sec-ai-trust-features__title {
  margin: 0;
  font-family: var(--font-sans);
  font-size: 40px;
  font-weight: 700;
  line-height: 50px;
  color: var(--navy);
}

.sec-ai-trust-features__title-accent {
  color: var(--blue);
}

.sec-ai-trust-features__body {
  margin: 0;
  font-family: var(--font-sans);
  font-size: 16px;
  font-weight: 400;
  line-height: 23px;
  color: var(--navy-70);
}

/* ---- Accordion ---- */

.sec-ai-trust-features__acc {
  width: 100%;
  max-width: 507px;
}

.sec-ai-trust-features__item {
  border-bottom: 1px solid var(--navy-40);
  border-radius: 2px;
  transition: background-color var(--dur) var(--ease), border-color var(--dur) var(--ease);
}

.sec-ai-trust-features__item.is-open {
  background: #f9fafd;
  border-bottom-color: transparent;
}

.sec-ai-trust-features__item-h {
  margin: 0;
}

.sec-ai-trust-features__trigger {
  display: block;
  width: 100%;
  margin: 0;
  padding: 16px 16px 15px; /* 55px row pitch incl. 1px separator, as in Figma */
  background: transparent;
  border: 0;
  border-radius: 2px;
  cursor: pointer;
  text-align: left;
  font-family: var(--font-sans);
  font-size: 16px;
  font-weight: 600;
  line-height: 23px;
  color: var(--navy-80);
  transition: color var(--dur) var(--ease), padding var(--dur) var(--ease);
}

.sec-ai-trust-features__item:not(.is-open) .sec-ai-trust-features__trigger:hover {
  color: var(--navy);
  background: rgba(249, 250, 253, 0.8);
}

.sec-ai-trust-features__trigger:focus-visible {
  outline: 2px solid var(--blue);
  outline-offset: -2px;
}

.sec-ai-trust-features__item.is-open .sec-ai-trust-features__trigger {
  padding: 12px 16px 0;
  cursor: default;
}

.sec-ai-trust-features__panel {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.3s var(--ease);
}

.sec-ai-trust-features__item.is-open .sec-ai-trust-features__panel {
  grid-template-rows: 1fr;
}

.sec-ai-trust-features__panel-wrap {
  overflow: hidden;
  min-height: 0;
}

.sec-ai-trust-features__panel-txt {
  margin: 0;
  padding: 4px 16px 12px;
  font-family: var(--font-sans);
  font-size: 14px;
  font-weight: 400;
  line-height: 20px;
  color: var(--navy-80);
}

/* ---- Diagram ---- */

.sec-ai-trust-features__visual {
  position: relative;
  flex: 1 1 520px;
  max-width: 646px;
  min-width: 0;
  aspect-ratio: 646 / 530;
  /* Figma: diagram y=80..610 in the card — dead-centered, no extra offset */
}

.sec-ai-trust-features__diagram {
  position: absolute;
  top: 0;
  left: 0;
  width: 646px;
  height: 530px;
  transform-origin: top left;
}

.sec-ai-trust-features__ring {
  position: absolute;
  border-radius: 40px;
  opacity: 0.7;
}

.sec-ai-trust-features__ring--outer {
  left: 105px;
  top: 60px;
  width: 436px;
  height: 410px;
  border: 2px solid rgba(41, 98, 246, 0.3);
  box-shadow: 0 0 15.284px 0 rgba(41, 98, 246, 0.42);
  background: linear-gradient(
    222.75deg,
    rgba(41, 98, 246, 0.05) 2.81%,
    rgba(41, 98, 246, 0) 49.95%,
    rgba(41, 98, 246, 0.05) 97.08%
  );
}

.sec-ai-trust-features__ring--mid {
  left: 154px;
  top: 131px;
  width: 338px;
  height: 268px;
  border: 2px solid var(--white);
  box-shadow: 0 0 15.284px 0 rgba(41, 98, 246, 0.6);
}

.sec-ai-trust-features__ring--inner {
  left: 196px;
  top: 165px;
  width: 254px;
  height: 201px;
  border: 2px solid var(--white);
  box-shadow: 0 0 15.284px 0 rgba(41, 98, 246, 0.6);
}

.sec-ai-trust-features__lockup {
  position: absolute;
  left: 264px;
  top: 78px;
  width: 118px;
  height: 44px;
}

.sec-ai-trust-features__agent {
  position: absolute;
  left: 266px;
  top: 208px;
  width: 113.44px;
  height: 113.44px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: var(--white);
  box-shadow: 0 0 16.8px 0 rgba(41, 98, 246, 0.24);
  font-family: var(--font-sans);
  font-size: 19.74px;
  font-weight: 700;
  line-height: 1.2;
  color: var(--navy);
  text-align: center;
}

.sec-ai-trust-features__pill {
  position: absolute;
  transform: translateX(-50%);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 6px 10px;
  border: 1px solid #f5f5f8;
  border-radius: 20px;
  background: linear-gradient(220deg, #f7f9ff 0.47%, #eaefff 97.76%);
  backdrop-filter: blur(6.4px);
  -webkit-backdrop-filter: blur(6.4px);
  font-family: var(--font-sans);
  font-size: 12px;
  font-weight: 400;
  line-height: 16px;
  color: var(--navy-80);
  text-align: center;
  white-space: nowrap;
}

.sec-ai-trust-features__pill--wide {
  padding: 6px 15px;
  border-radius: 50px;
}

.sec-ai-trust-features__pill--identity {
  left: 287.5px;
  top: 154px;
}

.sec-ai-trust-features__pill--approval {
  left: 497px;
  top: 175px;
}

.sec-ai-trust-features__pill--runtime {
  left: 149px;
  top: 248px;
}

.sec-ai-trust-features__pill--permission {
  left: 442px;
  top: 307px;
}

.sec-ai-trust-features__pill--anomaly {
  left: 238.5px;
  top: 385px;
}

.sec-ai-trust-features__pill--audit {
  left: 405px;
  top: 385px;
}

/* ---- Responsive ---- */

@media (max-width: 1024px) {
  .sec-ai-trust-features__inner {
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    gap: 48px;
    min-height: 0;
    padding: 64px 32px;
  }

  .sec-ai-trust-features__copy {
    flex: 0 0 auto;
    width: 100%;
    max-width: 640px;
    margin-top: 0;
  }

  .sec-ai-trust-features__visual {
    flex: 0 0 auto;
    width: 100%;
    margin: 0 auto;
  }

  .sec-ai-trust-features__glow {
    top: auto;
    bottom: 0;
    -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 220px);
    mask-image: linear-gradient(180deg, transparent 0, #000 220px);
  }
}

@media (max-width: 768px) {
  .sec-ai-trust-features__inner {
    gap: 40px;
    padding: 48px 24px;
  }

  .sec-ai-trust-features__title {
    font-size: 28px;
    line-height: 36px;
  }

  .sec-ai-trust-features__acc {
    max-width: none;
  }
}

@media (max-width: 480px) {
  .sec-ai-trust-features__inner {
    padding: 40px 20px;
  }

  .sec-ai-trust-features__trigger {
    padding: 14px 12px 13px;
  }

  .sec-ai-trust-features__item.is-open .sec-ai-trust-features__trigger {
    padding: 12px 12px 0;
  }

  .sec-ai-trust-features__panel-txt {
    padding: 4px 12px 12px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .sec-ai-trust-features__panel,
  .sec-ai-trust-features__trigger,
  .sec-ai-trust-features__item {
    transition: none;
  }
}