@layer infine.components {
/* ==========================================================================
   Connect — the Insight order flow's offering overview (insights.cljs),
   and the pieces the order view (connect-insights-order.css) shares with it.

   Both pages open on a soft fade rather than a full-bleed band:
   a hard-edged band under the title bar leaves the bar looking cut off and stripes the page.
   The navy close is the only full-bleed colour block.
   Every block keeps to one left edge, --ci-edge:
   Connect's page padding plus the inset the Overview hero's content sits at.

   Colour comes from shared tokens: the navy is --co-hero-grad, the orange --co-status-orange
   and the card elevation --co-card-shadow, all on :root in connect-overview.css.
   ========================================================================== */

/* The soft green behind the title and the hero, tilted so that it rises to the right, into the corner beside the title.
   The title bar is part of Connect's shell and a page can only paint over it, not under it,
   so the fade is drawn by the parent the two share, and only while it holds an overview or an order form.
   Its stops are pixels from that parent's top, so the fade keeps its place however long the page is,
   and it lies over the parent's own fade rather than replacing it.
   The receipt keeps its own straight fade. */
.connect-content:has(> .connect-insights:not(.ci-received)) {
  background:
    linear-gradient(172deg,
      transparent 230px,
      var(--infine-green-lite-fade2) 310px,
      var(--infine-green-lite-fade2) 475px,
      transparent 693px),
    var(--infine-content-grad);
}

/* The lightbox is drawn in a portal outside the page, so what the two share is set on both. */
.connect-insights,
.ci-lightbox {
  --ci-ease-out: cubic-bezier(0.23, 1, 0.32, 1);
}

.connect-insights {
  --ci-inset: 50px;
  --ci-edge: calc(var(--mantine-spacing-xl) + var(--ci-inset));
  /* The deeper lift of the cards that carry the offer and the price. */
  --ci-lift:
    0 1px 2px color-mix(in srgb, var(--infine-blue) 5%, transparent),
    0 24px 48px -28px color-mix(in srgb, var(--infine-blue) 40%, transparent);

  padding-bottom: var(--mantine-spacing-xl);
  color: var(--infine-text);
}

/* ---- shared type ---- */
.connect-insights .ci-eyebrow {
  margin-bottom: 14px;
  font-family: var(--mantine-font-family-headings);
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--infine-green-dark);
}
.connect-insights .ci-display {
  margin: 0;
  max-width: 800px;
  font-family: var(--mantine-font-family-headings);
  font-weight: 300;
  font-size: 52px;
  line-height: 1.1;
  letter-spacing: -0.015em;
  color: var(--infine-blue);
  text-wrap: balance;
}
.connect-insights .ci-display b { font-weight: 600; }
.connect-insights .ci-intro {
  margin: 20px 0 0;
  max-width: 700px;
  font-size: 18px;
  line-height: 1.7;
}
.connect-insights .ci-h2 {
  margin: 0;
  font-family: var(--mantine-font-family-headings);
  font-weight: 600;
  font-size: 28px;
  line-height: 1.28;
  letter-spacing: -0.01em;
  color: var(--infine-blue);
}
.connect-insights .ci-lead {
  margin: 8px 0 0;
  max-width: 720px;
  font-size: 16px;
  line-height: 1.65;
  color: var(--infine-gray-active);
}

/* ---- check-marked lists: a CSS-drawn tick, which takes colour tokens and never reaches the clipboard ---- */
.connect-insights .ci-checks {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 9px;
}
.connect-insights .ci-checks li {
  position: relative;
  padding-left: 28px;
  font-size: 15px;
  line-height: 1.55;
}
.connect-insights .ci-checks li::before {
  content: "";
  position: absolute;
  left: 4px;
  top: 5px;
  width: 7px;
  height: 12px;
  border-right: 2.5px solid var(--infine-green-dark);
  border-bottom: 2.5px solid var(--infine-green-dark);
  transform: rotate(45deg);
}
.connect-insights .ci-checks--sm { gap: 7px; }
.connect-insights .ci-checks--sm li {
  padding-left: 24px;
  font-size: 13.5px;
  line-height: 1.5;
}
.connect-insights .ci-checks--sm li::before {
  top: 4px;
  width: 6px;
  height: 10px;
}

/* ---- numbered step circle ---- */
.connect-insights .ci-number {
  flex-shrink: 0;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--infine-green-dark);
  color: #fff;
  font-family: var(--mantine-font-family-headings);
  font-weight: 600;
  font-size: 14px;
}

/* ---- buttons and link-buttons ---- */
.connect-insights .ci-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 50px;
  box-sizing: border-box;
  padding: 13px 24px;
  border: 0;
  border-radius: 12px;
  font-family: var(--mantine-font-family-headings);
  font-weight: 700;
  font-size: 16px;
  line-height: 1.2;
  text-decoration: none;
  cursor: pointer;
  transition: background-color 0.18s ease, transform 0.18s ease;
}
.connect-insights .ci-button:focus-visible {
  outline: 2px solid var(--infine-blue-bright);
  outline-offset: 2px;
}
.connect-insights .ci-button--block {
  display: flex;
  width: 100%;
}
.connect-insights .ci-button--navy {
  background: var(--infine-blue);
  color: #fff;
}
.connect-insights .ci-button--navy:hover {
  background: color-mix(in srgb, var(--infine-blue) 86%, var(--infine-blue-bright));
}
.connect-insights .ci-button--orange {
  background: var(--co-status-orange);
  color: #fff;
}
.connect-insights .ci-button--orange:hover {
  background: color-mix(in srgb, var(--infine-yellow-bright) 94%, white);
  transform: translateY(-1px);
}
/* The outline button on the navy close. */
.connect-insights .ci-button--outline {
  background: transparent;
  border: 1px solid rgba(255, 255, 255, 0.45);
  color: #fff;
  font-weight: 600;
}
.connect-insights .ci-button--outline:hover { border-color: #fff; }

.connect-insights .ci-link {
  padding: 0;
  border: 0;
  background: none;
  font-family: inherit;
  font-weight: 600;
  font-size: 15px;
  text-align: left;
  color: var(--infine-blue-bright);
  cursor: pointer;
  transition: color 0.18s ease;
}
.connect-insights .ci-link:hover { color: var(--infine-blue); }

/* ---- the navy close ---- */
.connect-insights .ci-close {
  padding: 64px var(--ci-edge) 72px;
  background: var(--co-hero-grad);
}
.connect-insights .ci-close__inner {
  max-width: 940px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.connect-insights .ci-close__h {
  margin: 0;
  font-family: var(--mantine-font-family-headings);
  font-weight: 600;
  font-size: 30px;
  line-height: 1.28;
  letter-spacing: -0.01em;
  color: #fff;
}
.connect-insights .ci-close__p {
  margin: 0;
  font-size: 17px;
  line-height: 1.65;
  color: rgba(255, 255, 255, 0.84);
}
.connect-insights .ci-close__p a {
  color: #fff;
  font-weight: 700;
  text-underline-offset: 3px;
}
.connect-insights .ci-close__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin-top: 10px;
}

/* ==========================================================================
   The offering overview.
   One grid above the navy close: the text column, a gutter, and the rail of the offer and the three questions,
   which is sticky from the hero down to the end of the grid, the teams section.
   Rows are auto-placed: the hero takes row 1, and each section takes the next row.
   ========================================================================== */

/* A stacking context of its own, so that the glow can be drawn under the page's content;
   and a clip, since the glow is fixed to the frame and would otherwise also paint over the title bar and the app's footer.
   The clip stops at the bottom padding, which would otherwise show the glow as a strip under the navy close. */
.connect-insights.ci-overview {
  isolation: isolate;
  clip-path: inset(0 0 var(--mantine-spacing-xl));
}

/* The warm end of the header's gradient, drawn again in the frame's lower right,
   which is left empty beside the text column once the rail has stuck.
   Fixed to the frame, it stays there as the page scrolls. */
.connect-insights .ci-overview__glow {
  position: fixed;
  z-index: -1;
  right: 0;
  bottom: 0;
  width: min(1040px, 66vw);
  height: min(700px, 76vh);
  pointer-events: none;
  background: radial-gradient(100% 100% at 100% 100%,
      var(--infine-red-fade) 0,
      var(--infine-yellow-fade) 34%,
      color-mix(in srgb, var(--infine-yellow-fade) 40%, transparent) 60%,
      transparent 80%);
}

.connect-insights .ci-overview__grid {
  display: grid;
  grid-template-columns: var(--ci-edge) minmax(0, 1fr) 56px 380px var(--ci-edge);
  align-items: start;
}
.connect-insights .ci-overview__hero {
  grid-column: 2;
  grid-row: 1;
  min-width: 0;
  padding-top: 52px;
}
/* Spans the hero and the five sections under it, rows 1 to 6. */
.connect-insights .ci-overview__rail {
  grid-column: 4;
  grid-row: 1 / 7;
  position: sticky;
  top: 24px;
  display: flex;
  flex-direction: column;
  gap: 28px;
  margin-top: 44px;
}
/* A stuck rail taller than the frame would keep its foot out of reach until the teams section ends,
   so a frame too short for the whole rail lets it scroll away with the hero. */
@media (max-height: 719px) {
  .connect-insights .ci-overview__rail { position: static; }
}
.connect-insights .ci-overview__section {
  grid-column: 2;
  min-width: 0;
  padding-top: 64px;
}
.connect-insights.ci-overview .ci-close { margin-top: 80px; }

/* ---- hero ---- */
.connect-insights .ci-hero__note {
  margin: 18px 0 0;
  max-width: 700px;
  font-size: 15px;
  line-height: 1.6;
  color: var(--infine-gray-active);
}
/* On a wide frame the text column outgrows its measure, which left an empty field between the hero and the rail.
   There the title runs the whole column, and the intro and the note sit side by side under it.
   Below 1520px the two would be too narrow to read, so the hero stays one column. */
@media (min-width: 1520px) {
  .connect-insights .ci-overview__hero {
    display: grid;
    grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
    column-gap: 56px;
    align-items: baseline;
  }
  .connect-insights .ci-overview__hero > .ci-eyebrow,
  .connect-insights .ci-overview__hero > .ci-display { grid-column: 1 / -1; }
  .connect-insights .ci-overview__hero > .ci-display {
    max-width: none;
    font-size: clamp(52px, 3.7vw, 68px);
  }
  .connect-insights .ci-overview__hero > .ci-intro,
  .connect-insights .ci-overview__hero > .ci-hero__note { margin-top: 28px; }
  .connect-insights .ci-overview__hero > .ci-hero__note {
    padding-left: 24px;
    border-left: 2px solid var(--infine-green-dark);
  }
}

/* ---- offer card: the only navy surface above the fold ---- */
.connect-insights .ci-offer {
  overflow: hidden;
  background: #fff;
  border: 1px solid var(--infine-blue-light-fade);
  border-radius: 20px;
  box-shadow: var(--ci-lift);
}
.connect-insights .ci-offer__head {
  padding: 22px 24px 20px;
  background: var(--co-hero-grad);
  color: #fff;
}
.connect-insights .ci-offer__name {
  font-family: var(--mantine-font-family-headings);
  font-weight: 600;
  font-size: 21px;
  line-height: 1.3;
}
/* Flex rather than one run of text, so that where the card is too narrow for the line,
   the unit wraps whole and sits close under the price rather than splitting mid-phrase a 30px line below it. */
.connect-insights .ci-offer__price {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  column-gap: 0.25em;
  margin: 12px 0 0;
  font-family: var(--mantine-font-family-headings);
  font-weight: 600;
  font-size: 28px;
  line-height: 1.1;
}
.connect-insights .ci-offer__per {
  font-family: var(--mantine-font-family);
  font-weight: 400;
  font-size: 14.5px;
  color: rgba(255, 255, 255, 0.78);
}
.connect-insights .ci-offer__terms {
  margin: 6px 0 0;
  font-size: 13.5px;
  color: rgba(255, 255, 255, 0.78);
}
.connect-insights .ci-offer__body { padding: 16px 24px 18px; }
.connect-insights .ci-offer__body .ci-button {
  padding-inline: 20px;
  font-size: 15.5px;
}

/* ---- the three questions, under the offer in the rail ---- */
.connect-insights .ci-questions {
  padding: 18px 20px 4px;
  background: #fff;
  border: 1px solid var(--infine-blue-light-fade);
  border-radius: 18px;
  box-shadow: var(--co-card-shadow);
}
.connect-insights .ci-questions__h {
  margin: 0 0 4px;
  font-family: var(--mantine-font-family-headings);
  font-weight: 700;
  font-size: 16px;
  line-height: 1.35;
  color: var(--infine-blue);
}
.connect-insights .ci-questions__list {
  list-style: none;
  margin: 0;
  padding: 0;
}
.connect-insights .ci-question {
  display: grid;
  grid-template-columns: 26px minmax(0, 1fr);
  gap: 12px;
  padding: 12px 0;
}
.connect-insights .ci-question + .ci-question { border-top: 1px solid var(--infine-blue-light-fade); }
.connect-insights .ci-question .ci-number {
  width: 26px;
  height: 26px;
  font-size: 13px;
}
.connect-insights .ci-question__title {
  font-family: var(--mantine-font-family-headings);
  font-weight: 600;
  font-size: 15.5px;
  line-height: 26px;
  color: var(--infine-blue);
}
.connect-insights .ci-question__body {
  margin: 2px 0 0;
  font-size: 14px;
  line-height: 1.5;
  text-wrap: pretty;
  color: var(--infine-gray-active);
}

/* ---- the three analyses, stacked: nothing hidden behind a tab ---- */
.connect-insights .ci-modules {
  display: flex;
  flex-direction: column;
  gap: 20px;
  margin-top: 24px;
}
.connect-insights .ci-module {
  display: grid;
  /* The screenshot takes half the card up to 420px, and the text the rest. */
  grid-template-columns: min(420px, 50%) minmax(0, 1fr);
  overflow: hidden;
  background: #fff;
  border: 1px solid var(--infine-blue-light-fade);
  border-radius: 18px;
  box-shadow: var(--co-card-shadow);
  /* Where a Read more link scrolls the card to. */
  scroll-margin-top: 24px;
}
.connect-insights .ci-module--evaluation,
.ci-lightbox--evaluation {
  --ci-module-tint: var(--infine-green-lite-fade2);
  --ci-module-icon-bg: var(--infine-green-bg);
  --ci-module-icon-border: var(--infine-green-fade);
  --ci-module-icon-ink: var(--infine-green-dark);
}
.connect-insights .ci-module--co2,
.ci-lightbox--co2 {
  --ci-module-tint: var(--infine-blue-bg);
  --ci-module-icon-bg: var(--infine-blue-light-fade);
  --ci-module-icon-border: var(--infine-blue-light-fade);
  --ci-module-icon-ink: var(--infine-blue);
}
.connect-insights .ci-module--risk,
.ci-lightbox--risk {
  --ci-module-tint: var(--infine-yellow-bg);
  --ci-module-icon-bg: var(--infine-yellow-bg);
  --ci-module-icon-border: var(--infine-yellow-fade);
  --ci-module-icon-ink: var(--infine-text);
}

/* ---- the samples: each leans toward the mouse and catches its light, and opens the lightbox ----
   --ci-pointer-x and -y are the pointer's place in the panel, 0 to 1 from its top left, written by insights.cljs.
   The panel's perspective is what makes the sample's rotation read as depth. */
.connect-insights .ci-module__shot {
  --ci-pointer-x: 0.5;
  --ci-pointer-y: 0.5;
  position: relative;
  display: flex;
  align-items: center;
  padding: 22px;
  background: var(--ci-module-tint);
  border-right: 1px solid var(--infine-blue-light-fade);
  perspective: 1000px;
}
/* The pool of light the pointer casts on the panel. */
.connect-insights .ci-module__shot::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(260px circle at calc(var(--ci-pointer-x) * 100%) calc(var(--ci-pointer-y) * 100%),
      color-mix(in srgb, var(--mantine-color-white) 85%, transparent), transparent);
  opacity: 0;
  transition: opacity 0.4s ease;
}
.connect-insights .ci-module__enlarge {
  position: relative;
  display: block;
  width: 100%;
  padding: 0;
  border: 0;
  border-radius: 10px;
  background: none;
  cursor: zoom-in;
  transform-style: preserve-3d;
  box-shadow: 0 10px 22px -16px color-mix(in srgb, var(--infine-blue) 35%, transparent);
  transition:
    transform 0.6s var(--ci-ease-out),
    box-shadow 0.6s var(--ci-ease-out),
    scale 0.16s ease-out;
}
.connect-insights .ci-module__enlarge:active { scale: 0.985; }
.connect-insights .ci-module__enlarge:focus-visible {
  outline: 2px solid var(--infine-blue-bright);
  outline-offset: 4px;
}
/* The glare where the light falls, fading to a shade on the far side.
   Lifted off the sample by a pixel, since two layers in one plane of a 3D context can flicker through each other. */
.connect-insights .ci-module__enlarge::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  background: radial-gradient(
      farthest-corner circle at calc(var(--ci-pointer-x) * 100%) calc(var(--ci-pointer-y) * 100%),
      color-mix(in srgb, var(--mantine-color-white) 55%, transparent),
      transparent 45%,
      color-mix(in srgb, var(--infine-blue) 10%, transparent));
  transform: translateZ(1px);
  opacity: 0;
  transition: opacity 0.4s ease;
}
.connect-insights .ci-module__img {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 10;
  object-fit: cover;
  object-position: top;
  border: 1px solid var(--infine-blue-light-fade);
  border-radius: 10px;
  background: #fff;
}
/* Held off the sample in depth, so that it moves further than the sample as it leans. */
.connect-insights .ci-module__enlarge-mark {
  position: absolute;
  top: var(--mantine-spacing-xs);
  right: var(--mantine-spacing-xs);
  width: 32px;
  height: 32px;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: var(--mantine-color-white);
  border: 1px solid var(--infine-blue-light-fade);
  color: var(--infine-blue);
  box-shadow: var(--co-card-shadow);
  transform: translateZ(24px);
  transition: background-color 0.18s ease, border-color 0.18s ease, color 0.18s ease;
}
.connect-insights .ci-module__enlarge:hover .ci-module__enlarge-mark,
.connect-insights .ci-module__enlarge:focus-visible .ci-module__enlarge-mark {
  background: var(--infine-blue);
  border-color: var(--infine-blue);
  color: var(--mantine-color-white);
}
/* Only a mouse leans the samples, and only for a reader who has not asked for less motion. */
@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
  .connect-insights .ci-module__shot[data-pointer]::before,
  .connect-insights .ci-module__shot[data-pointer] .ci-module__enlarge::after { opacity: 1; }
  .connect-insights .ci-module__shot[data-pointer] .ci-module__enlarge {
    transform:
      rotateX(calc((var(--ci-pointer-y) - 0.5) * 12deg))
      rotateY(calc((0.5 - var(--ci-pointer-x)) * 16deg))
      translateZ(14px);
    box-shadow:
      calc((0.5 - var(--ci-pointer-x)) * 28px)
      calc(20px + (0.5 - var(--ci-pointer-y)) * 16px)
      36px -16px
      color-mix(in srgb, var(--infine-blue) 38%, transparent);
    /* Short, so that the lean trails the pointer by a moment rather than jumping with it. */
    transition:
      transform 0.14s ease-out,
      box-shadow 0.14s ease-out,
      scale 0.16s ease-out;
  }
}
.connect-insights .ci-module__text {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 24px 28px 26px;
}
.connect-insights .ci-module__title {
  display: flex;
  align-items: center;
  gap: 10px;
}
.connect-insights .ci-module__icon {
  width: 36px;
  height: 36px;
  box-sizing: border-box;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--ci-module-icon-bg);
  border: 1px solid var(--ci-module-icon-border);
  color: var(--ci-module-icon-ink);
}
.connect-insights .ci-module__h {
  margin: 0;
  font-family: var(--mantine-font-family-headings);
  font-weight: 600;
  font-size: 22px;
  color: var(--infine-blue);
}
.connect-insights .ci-module__body {
  margin: 0;
  font-size: 15px;
  line-height: 1.6;
}

/* ---- what it costs ---- */
.connect-insights .ci-costs {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 20px;
  margin-top: 20px;
}
.connect-insights .ci-cost {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 24px 26px;
  background: #fff;
  border: 1px solid var(--infine-blue-light-fade);
  border-radius: 16px;
  box-shadow: var(--co-card-shadow);
}
.connect-insights .ci-cost--free {
  background: var(--infine-green-bg);
  border-color: var(--infine-green-fade);
  box-shadow: none;
}
.connect-insights .ci-cost__icon {
  width: 38px;
  height: 38px;
  box-sizing: border-box;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--infine-blue-bg);
  border: 1px solid var(--infine-blue-light-fade);
  color: var(--infine-blue);
}
.connect-insights .ci-cost--free .ci-cost__icon {
  background: #fff;
  border-color: var(--infine-green-fade);
  color: var(--infine-green-bright);
}
.connect-insights .ci-cost__body {
  margin: 0;
  font-size: 16.5px;
  line-height: 1.65;
}
.connect-insights .ci-cost .ci-link { align-self: flex-start; }

/* ---- ordinary data in, insight out ---- */
.connect-insights .ci-examples {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 20px;
  margin-top: 22px;
}
.connect-insights .ci-example {
  display: flex;
  flex-direction: column;
  padding: 22px 24px 24px;
  background: #fff;
  border: 1px solid var(--infine-blue-light-fade);
  border-radius: 16px;
  box-shadow: var(--co-card-shadow);
}
.connect-insights .ci-pill {
  align-self: flex-start;
  margin-bottom: 10px;
  padding: 3px 9px;
  border-radius: 999px;
  font-family: var(--mantine-font-family-headings);
  font-weight: 700;
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.connect-insights .ci-pill--evaluation {
  background: var(--infine-green-bg);
  color: var(--infine-green-dark);
}
.connect-insights .ci-pill--co2 {
  background: var(--infine-blue-light-fade);
  color: var(--infine-blue);
}
.connect-insights .ci-pill--all {
  background: var(--infine-blue-bg);
  border: 1px solid var(--infine-blue-light-fade);
  color: var(--infine-gray-active);
}
.connect-insights .ci-pill--risk {
  background: var(--infine-yellow-fade);
  color: var(--infine-text);
}
.connect-insights .ci-example__title {
  margin: 0 0 8px;
  font-family: var(--mantine-font-family-headings);
  font-weight: 600;
  font-size: 16px;
  line-height: 1.42;
  color: var(--infine-blue);
}
.connect-insights .ci-example__body {
  margin: 0;
  font-size: 14.5px;
  line-height: 1.55;
  color: var(--infine-gray-active);
}

/* ---- five ways suppliers use them ---- */
.connect-insights .ci-uses {
  margin: 20px 0 0;
  background: #fff;
  border: 1px solid var(--infine-blue-light-fade);
  border-radius: 16px;
  box-shadow: var(--co-card-shadow);
}
.connect-insights .ci-uses__row {
  display: grid;
  grid-template-columns: 240px minmax(0, 1fr);
  gap: 24px;
  padding: 18px 26px;
}
.connect-insights .ci-uses__row + .ci-uses__row {
  border-top: 1px solid var(--infine-blue-light-fade);
}
.connect-insights .ci-uses__term {
  font-family: var(--mantine-font-family-headings);
  font-weight: 600;
  font-size: 16px;
  line-height: 1.5;
  color: var(--infine-blue);
}
.connect-insights .ci-uses__description {
  margin: 0;
  font-size: 15px;
  line-height: 1.6;
  color: var(--infine-gray-active);
}

/* ---- every team behind the customer relationship ---- */
.connect-insights .ci-teams {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
  margin-top: 20px;
}
.connect-insights .ci-team {
  padding: 20px 22px;
  background: var(--infine-green-lite-fade2);
  border: 1px solid var(--infine-green-fade);
  border-radius: 14px;
}
.connect-insights .ci-team__name {
  margin-bottom: 5px;
  font-family: var(--mantine-font-family-headings);
  font-weight: 600;
  font-size: 16px;
  color: var(--infine-blue);
}
.connect-insights .ci-team__body {
  font-size: 14.5px;
  line-height: 1.55;
  color: var(--infine-gray-active);
}
.connect-insights .ci-invite {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px;
  margin-top: 18px;
  padding: 16px 22px;
  background: #fff;
  border: 1px solid var(--infine-blue-light-fade);
  border-radius: 14px;
  font-size: 15px;
  color: var(--infine-blue);
}
.connect-insights .ci-invite__link {
  margin-left: auto;
  font-weight: 700;
  white-space: nowrap;
}

/* ---- narrow frames: one column, and the offer card under the hero,
   no longer sticky, which it cannot be with nothing beside it ---- */
@media (max-width: 1080px) {
  .connect-insights .ci-overview__grid {
    display: flex;
    flex-direction: column;
    align-items: stretch;
  }
  .connect-insights .ci-overview__glow { display: none; }
  .connect-insights .ci-overview__hero { padding: 44px var(--ci-edge) 40px; }
  .connect-insights .ci-overview__rail {
    position: static;
    margin: 0 var(--ci-edge);
    max-width: 520px;
  }
  .connect-insights .ci-overview__section { padding-inline: var(--ci-edge); }
  .connect-insights .ci-display { font-size: 44px; }
}
@media (max-width: 880px) {
  .connect-insights .ci-costs,
  .connect-insights .ci-examples,
  .connect-insights .ci-teams { grid-template-columns: minmax(0, 1fr); }
  .connect-insights .ci-module { grid-template-columns: minmax(0, 1fr); }
  .connect-insights .ci-module__shot {
    border-right: 0;
    border-bottom: 1px solid var(--infine-blue-light-fade);
  }
  .connect-insights .ci-uses__row {
    grid-template-columns: minmax(0, 1fr);
    gap: 4px;
  }
}
@media (max-width: 560px) {
  .connect-insights { --ci-inset: 0px; }
  .connect-insights .ci-display { font-size: 36px; }
}

/* ==========================================================================
   The lightbox the samples open in: the sample at full size on the navy of the offer card,
   arrows beside it, and under it the module's name and the three samples to jump between.
   Mantine draws it in a portal on the body, outside the page, so none of these rules is scoped to .connect-insights.
   ========================================================================== */
.ci-lightbox {
  --ci-lightbox-step: 52px;
  --ci-lightbox-gap: var(--mantine-spacing-lg);
  --ci-lightbox-thumb: 88px;
}
.ci-lightbox__overlay {
  --overlay-bg: color-mix(in srgb, var(--infine-blue) 88%, transparent);
  --overlay-filter: blur(6px);
}
/* Not scrolled, as Mantine's content otherwise is, since a scroller clips the focus rings of the controls at its edges;
   the frame is sized to leave the content within the window. */
.ci-lightbox__content {
  overflow: visible;
  background: none;
  box-shadow: none;
  color: var(--mantine-color-white);
}
.ci-lightbox__stage {
  position: relative;
  display: grid;
  grid-template-columns: var(--ci-lightbox-step) auto var(--ci-lightbox-step);
  align-items: center;
  column-gap: var(--ci-lightbox-gap);
}
/* At most 960px, four fifths of the samples' own 1200px, since they have no larger version and a high-density screen
   shows them soft at full size; no wider than leaves room for the arrows beside it,
   and no taller than leaves room for the caption under it.
   --modal-x-offset and --modal-y-offset are the modal's margins to the window, which Mantine sets on the root. */
.ci-lightbox__frame {
  --ci-lightbox-width-by-height: calc(
    (100dvh
      - 2 * var(--modal-y-offset)
      - var(--ci-lightbox-gap)
      - var(--ci-lightbox-thumb) * 10 / 16
      - var(--mantine-spacing-xs))
    * 16 / 10);
  display: grid;
  width: min(
    960px,
    calc(100vw - 2 * (var(--modal-x-offset) + var(--ci-lightbox-step) + var(--ci-lightbox-gap))),
    var(--ci-lightbox-width-by-height));
  aspect-ratio: 16 / 10;
  overflow: hidden;
  border-radius: 14px;
  background: var(--mantine-color-white);
  box-shadow: 0 32px 64px -32px color-mix(in srgb, var(--mantine-color-black) 60%, transparent);
}
/* Every sample in the one cell; the blur hides the moment two of them show through each other. */
.ci-lightbox__img {
  grid-area: 1 / 1;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  opacity: 0;
  scale: 1.02;
  filter: blur(4px);
  transition: opacity 0.24s ease, scale 0.32s var(--ci-ease-out), filter 0.24s ease;
}
.ci-lightbox__img--shown {
  opacity: 1;
  scale: 1;
  filter: blur(0);
}
.ci-lightbox__step,
.ci-lightbox__close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  padding: 0;
  border: 1px solid color-mix(in srgb, var(--mantine-color-white) 28%, transparent);
  border-radius: 50%;
  background: color-mix(in srgb, var(--mantine-color-white) 8%, transparent);
  color: var(--mantine-color-white);
  cursor: pointer;
  transition: background-color 0.18s ease, border-color 0.18s ease, color 0.18s ease, scale 0.16s ease-out;
}
.ci-lightbox__step {
  width: var(--ci-lightbox-step);
  height: var(--ci-lightbox-step);
}
/* At the top of the next arrow's column, which is empty above the arrow. */
.ci-lightbox__close {
  position: absolute;
  top: 0;
  right: calc((var(--ci-lightbox-step) - 44px) / 2);
  width: 44px;
  height: 44px;
}
@media (hover: hover) {
  .ci-lightbox__step:hover,
  .ci-lightbox__close:hover {
    background: var(--mantine-color-white);
    border-color: var(--mantine-color-white);
    color: var(--infine-blue);
  }
}
.ci-lightbox__step:active,
.ci-lightbox__close:active { scale: 0.95; }
.ci-lightbox__step:focus-visible,
.ci-lightbox__close:focus-visible,
.ci-lightbox__thumb:focus-visible {
  outline: 2px solid var(--mantine-color-white);
  outline-offset: 3px;
}
/* Level with the frame's edges rather than the arrows'. */
.ci-lightbox__caption {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--mantine-spacing-md) var(--ci-lightbox-gap);
  margin-top: var(--ci-lightbox-gap);
  padding-inline: calc(var(--ci-lightbox-step) + var(--ci-lightbox-gap));
}
.ci-lightbox__name {
  display: flex;
  align-items: center;
  gap: var(--mantine-spacing-sm);
  min-width: 0;
}
.ci-lightbox__icon {
  flex-shrink: 0;
  width: 36px;
  height: 36px;
  box-sizing: border-box;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--ci-module-icon-bg);
  border: 1px solid var(--ci-module-icon-border);
  color: var(--ci-module-icon-ink);
}
.ci-lightbox__title {
  font-family: var(--mantine-font-family-headings);
  font-weight: 600;
  font-size: 24px;
  line-height: 1.2;
  color: var(--mantine-color-white);
}
.ci-lightbox__count {
  margin-left: var(--mantine-spacing-xs);
  font-size: var(--mantine-font-size-sm);
  font-variant-numeric: tabular-nums;
  color: color-mix(in srgb, var(--mantine-color-white) 66%, transparent);
}
.ci-lightbox__thumbs {
  display: flex;
  gap: var(--mantine-spacing-sm);
}
.ci-lightbox__thumb {
  width: var(--ci-lightbox-thumb);
  aspect-ratio: 16 / 10;
  padding: 0;
  border: 0;
  border-radius: 8px;
  overflow: hidden;
  background: var(--mantine-color-white);
  cursor: pointer;
  opacity: 0.5;
  transition: opacity 0.2s ease, box-shadow 0.2s ease;
}
.ci-lightbox__thumb img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top;
}
@media (hover: hover) {
  .ci-lightbox__thumb:hover { opacity: 0.85; }
}
/* A white ring with the navy showing between it and the thumbnail. */
.ci-lightbox__thumb[aria-current="true"] {
  opacity: 1;
  box-shadow: 0 0 0 2px var(--infine-blue), 0 0 0 4px var(--mantine-color-white);
}
@media (prefers-reduced-motion: reduce) {
  .ci-lightbox__img {
    scale: 1;
    filter: none;
  }
}
/* Too narrow for arrows beside the sample: they and the close lie over its edges instead. */
@media (max-width: 720px) {
  .ci-lightbox {
    --ci-lightbox-gap: var(--mantine-spacing-sm);
    --ci-lightbox-thumb: 64px;
  }
  .ci-lightbox__stage { grid-template-columns: minmax(0, 1fr); }
  .ci-lightbox__frame { width: min(calc(100vw - 2 * var(--modal-x-offset)), var(--ci-lightbox-width-by-height)); }
  .ci-lightbox__step,
  .ci-lightbox__close {
    position: absolute;
    z-index: 1;
    width: 40px;
    height: 40px;
    border-color: transparent;
    background: color-mix(in srgb, var(--infine-blue) 72%, transparent);
  }
  .ci-lightbox__step { top: calc(50% - 20px); }
  .ci-lightbox__step--previous { left: var(--mantine-spacing-xs); }
  .ci-lightbox__step--next { right: var(--mantine-spacing-xs); }
  .ci-lightbox__close {
    top: var(--mantine-spacing-xs);
    right: var(--mantine-spacing-xs);
  }
  .ci-lightbox__caption { padding-inline: 0; }
  .ci-lightbox__title { font-size: 20px; }
}
}