/* New AI service pages (DIFWEB-191): Agentic AI Engineering (§H.6) +
   AI-Driven Product Discovery (§H.7). Holds the bits not covered by the shared
   section components: the under-hero trust strip, the Discovery sprint-rail
   day label, the Agentic buy-vs-build table, and the standalone CTA bands.
   Built to the existing dark service-page palette; QA to confirm on staging. */

/* Animated CSS-mesh hero moved to the shared public/css/mesh-hero.css so the AI
   Development page can use it too (DIFWEB-196). This page links it separately. */

/* ---- Trust strip (under the hero) ------------------------------------- */
.trust-strip {
  background: #1b1d33;
  padding: 18px 0;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}
.trust-strip__list {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
}
.trust-strip__item {
  font-family: Inter, sans-serif;
  font-size: 14px;
  font-weight: 500;
  line-height: 20px;
  color: rgba(255, 255, 255, 0.78);
  white-space: nowrap;
}
.trust-strip__item:not(:last-child)::after {
  content: "\00B7";
  margin: 0 16px;
  color: rgba(255, 255, 255, 0.35);
}
@media (max-width: 767px) {
  .trust-strip__item { font-size: 13px; }
  .trust-strip__item:not(:last-child)::after { margin: 0 10px; }
}

/* ---- Discovery sprint-rail day label (reuses .production-ready-ai) ----- */
.production-ready-ai__days {
  display: inline-block;
  align-self: flex-start;
  font-family: Inter, sans-serif;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.55);
  margin: 2px 0 6px;
}

/* ---- Buy-vs-build comparison table (Agentic page) --------------------- */
.buy-vs-build {
  /* 80px to match every other white section's rhythm (was 64, the lone
     outlier that made this section sit 16px tighter than its neighbours). */
  padding: 80px 0;
}
.buy-vs-build .title {
  /* The base .title class sets no color (it inherits white inside the dark
     hero contexts it's normally used in). This section sits on the light page
     background, so set the dark heading color explicitly or it renders invisible. */
  color: #131426;
  margin-bottom: 16px;
}

/* NDA caption shown INSIDE the success-story see-more band (passed as the
   CasesCarouselSection `footnote` prop). It's a third flex child; flex-wrap
   drops it onto its own full-width row below the headline + button, centered
   in semi-transparent white over the gradient. AI pages only (this file). */
.cases-carousel-v4 .see-more-container {
  flex-wrap: wrap;
}
/* p.…__note beats the shared `.see-more-container > p` rule (which sets
   text-align:left + 20px) so the note centers at 14px. */
.cases-carousel-v4 .see-more-container p.see-more-container__note {
  flex-basis: 100%;
  margin: 20px 0 0;
  text-align: center;
  font-family: Inter, sans-serif;
  font-size: 14px;
  font-style: italic;
  color: rgba(255, 255, 255, 0.85);
}
.buy-vs-build__intro {
  max-width: 760px;
  margin: 0 0 32px;
  font-family: Inter, sans-serif;
  font-size: 16px;
  line-height: 26px;
  color: #4a4a68;
}
.buy-vs-build__table-wrap {
  overflow-x: auto;
}
.buy-vs-build__table {
  width: 100%;
  min-width: 640px;
  border-collapse: separate;
  border-spacing: 0;
  font-family: Inter, sans-serif;
  font-size: 15px;
  line-height: 22px;
}
.buy-vs-build__table th,
.buy-vs-build__table td {
  text-align: left;
  padding: 16px 20px;
  border-bottom: 1px solid #e8e8f0;
  vertical-align: top;
}
.buy-vs-build__table thead th {
  font-weight: 700;
  color: #131426;
  border-bottom: 2px solid #d7d7e3;
  vertical-align: middle;
}
/* Headers of the two data columns align over their value text (which is
   indented 48px to clear the check / dash icon). */
.buy-vs-build__table thead .bvb-ots,
.buy-vs-build__table thead .bvb-diffco {
  padding-left: 48px;
}
.buy-vs-build__table .bvb-ots {
  color: #6b6b85;
}
.buy-vs-build__table tbody th {
  font-weight: 600;
  color: #131426;
  width: 26%;
}
.buy-vs-build__table td {
  color: #4a4a68;
}

/* ---- Focus on the Diffco column: a lifted, branded "winner" card ------ */
.buy-vs-build__table th:last-child,
.buy-vs-build__table td:last-child {
  background: #f4efff;
  border-left: 1px solid #e6dcff;
  border-right: 1px solid #e6dcff;
  color: #2e186a;
}
/* gradient header caps the column */
.buy-vs-build__table thead th:last-child {
  background: linear-gradient(125deg, #2e186a 0%, #5d21d1 100%);
  border: none;
  border-top-left-radius: 16px;
  border-top-right-radius: 16px;
}
.buy-vs-build__table .bvb-diffco-label {
  display: block;
  color: #fff;
  font-weight: 600;
}
.buy-vs-build__table .bvb-diffco-label strong {
  font-weight: 800;
}
/* round + close the bottom of the column card */
.buy-vs-build__table tbody tr:last-child td:last-child {
  border-bottom: 1px solid #e6dcff;
  border-bottom-left-radius: 16px;
  border-bottom-right-radius: 16px;
}
/* orange check badge on every Diffco cell */
.buy-vs-build__table tbody td:last-child {
  position: relative;
  padding-left: 48px;
  font-weight: 600;
}
.buy-vs-build__table tbody td:last-child::before {
  content: "";
  position: absolute;
  left: 18px;
  top: 16px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: #fe7624;
}
.buy-vs-build__table tbody td:last-child::after {
  content: "";
  position: absolute;
  left: 25px;
  top: 19px;
  width: 5px;
  height: 9px;
  border: solid #fff;
  border-width: 0 2.5px 2.5px 0;
  transform: rotate(45deg);
}
/* muted dash on every off-the-shelf cell */
.buy-vs-build__table tbody td:nth-child(2) {
  position: relative;
  padding-left: 48px;
}
.buy-vs-build__table tbody td:nth-child(2)::before {
  content: "";
  position: absolute;
  left: 19px;
  top: 26px;
  width: 14px;
  height: 2.5px;
  border-radius: 2px;
  background: #c5c5d2;
}

/* ---- Standalone CTA bands (Discovery mid-page + final) ---------------- */
.cta-band {
  background: linear-gradient(93deg, #2e186a 0%, #5d21d1 100%);
  padding: 56px 0;
  text-align: center;
}
.cta-band__inner {
  max-width: 720px;
  margin: 0 auto;
}
.cta-band h2 {
  color: #fff;
  margin: 0 0 14px;
}
.cta-band p {
  color: rgba(255, 255, 255, 0.85);
  font-family: Inter, sans-serif;
  font-size: 16px;
  line-height: 26px;
  margin: 0 0 28px;
}
.cta-band__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  justify-content: center;
}

/* Cases-carousel art-containment rules (overflow clip + RedTrack cap/center)
   moved to the shared public/css/cases-carousel.css so the AI Development page
   gets them too (DIFWEB-196). This page links both stylesheets. */

/* FAQ-neighbourhood spacing (cases-band bottom + FAQ + form top) moved to the
   shared public/css/cases-carousel.css so the AI Development page gets the same
   tightened rhythm (DIFWEB-196). */

/* Discovery's DevFormats illustrations are square (160x160) flat-art scenes, but
   the .g-dfb layout is built for wide art (Agentic's is ~1120px and fills the
   column). At their intrinsic size they render tiny; filling the column makes a
   huge, mostly-empty card. So fix them at a moderate 240px and center them in
   the column (the layout left-aligns, leaving a gap on the right). Full selector
   to beat the base `.right img { display:flex }`. Targeted by src so the Agentic
   page's wide art is untouched; max-width:100% still applies on narrow screens. */
.g-dfb .items .item__content .right img[src*="-v4/s-"] {
  width: 240px;
  display: block;
  margin: 0 auto;
}