@layer infine.components {
/* ==========================================================================
   Connect — "Turn data into decisions" optional-analyses page.

   A marketing-style tour, unlike the app's working views. Two band
   treatments give the page rhythm instead of a stack of same-shaped boxes:
   the warm opener and the navy finale BLEED edge-to-edge (the draft's
   treatment — negative margins swallow the page padding), while the pale-blue
   portfolio band stays a rounded card in the Overview hero's shape language.
   Every content block shares one left type line: unbanded sections and the
   card band inset by --ci-inset, the full-bleed bands by the page padding
   plus --ci-inset, so the text edge never moves while surfaces vary.

   Colour comes from shared tokens throughout: the warm brand gradient is
   --infine-warm-grad (tokens.css, shared with the login screen), the navy
   band is --co-hero-grad and the CTA orange --co-status-orange (both on
   :root in connect-overview.css, shared with the Overview hero).
   ========================================================================== */

.connect-insights {
  /* Shared inner inset — the hero's __inner padding, reused by every band
     and by the unbanded sections so all content aligns on one left edge. */
  --ci-inset: 50px;

  padding: 0 var(--mantine-spacing-xl) var(--mantine-spacing-xl);
}

/* ---- shared type ---- */
.connect-insights .ci-h2 {
  font-family: var(--mantine-font-family-headings);
  font-weight: 600;
  font-size: 30px;
  line-height: 1.28;
  letter-spacing: -0.01em;
  color: var(--infine-blue);
  margin: 0;
  text-wrap: balance;
}
.connect-insights .ci-h2--light { color: #fff; }
.connect-insights .ci-body {
  font-size: 16px;
  line-height: 1.65;
  color: var(--infine-text);
  max-width: 620px;
}
.connect-insights .ci-body--light {
  color: rgba(255, 255, 255, 0.82);
  font-size: 17px;
}

/* ---- intro ---- */
.connect-insights .ci-intro {
  display: grid;
  grid-template-columns: 1.15fr 1fr;
  gap: 60px;
  align-items: center;
  padding: 44px var(--ci-inset) 48px;
}
.connect-insights .ci-intro__h {
  font-family: var(--mantine-font-family-headings);
  font-weight: 300;
  font-size: clamp(40px, 3.4vw, 54px);
  line-height: 1.1;
  letter-spacing: -0.015em;
  color: var(--infine-blue);
  margin: 0;
}
.connect-insights .ci-intro__h b { font-weight: 600; }
.connect-insights .ci-intro__p {
  font-size: 18px;
  line-height: 1.7;
  color: var(--infine-text);
  margin: 0;
  max-width: 560px;
}

/* ---- bands ---- */
.connect-insights .ci-band {
  border-radius: 24px;
  padding: 56px var(--ci-inset);
}
/* Full-bleed bands: negative margins swallow the page's own padding so the
   surface runs edge-to-edge, and the inner inset grows by the same amount so
   the content stays on the page's shared left type line. */
.connect-insights .ci-band--warm,
.connect-insights .ci-band--navy {
  margin-inline: calc(-1 * var(--mantine-spacing-xl));
  border-radius: 0;
  padding-inline: calc(var(--mantine-spacing-xl) + var(--ci-inset));
}
.connect-insights .ci-band--warm { background: #fff var(--infine-warm-grad); }
.connect-insights .ci-band--blue {
  background: var(--infine-blue-bg);
  border: 1px solid var(--infine-blue-light-fade);
}
.connect-insights .ci-band--navy {
  background: var(--co-hero-grad);
  padding-block: 60px 66px;
}
.connect-insights .ci-band__grid {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: 60px;
  align-items: center;
}
.connect-insights .ci-band__grid--text-first { grid-template-columns: 1fr 1.1fr; }
.connect-insights .ci-band__text {
  display: flex;
  flex-direction: column;
  gap: 18px;
}
/* The navy band's prose column — roughly the draft's 820-of-1160 proportion
   at this frame's wider inner width, so the text visibly OWNS the band
   instead of leaving an image-sized void on the right. */
.connect-insights .ci-band__text--wide { max-width: 940px; }
/* Let the paragraphs fill that column — the shared .ci-body cap is tuned for
   the two-column bands, where prose shares the row with a screenshot. */
.connect-insights .ci-band__text--wide .ci-body { max-width: none; }

/* ---- illustration slots ---- */
.connect-insights .ci-shot {
  aspect-ratio: 16 / 10;
  border-radius: 10px;
  border: 1px solid var(--infine-blue-light-fade);
  background: color-mix(in srgb, var(--infine-blue-light-fade) 40%, white);
}
/* In-band variant: a white card slot lifted off the band surface. */
.connect-insights .ci-shot--card {
  background: #fff;
  box-shadow: var(--co-card-shadow);
}
/* Example-card variant: fills the card top, only the divider below shows. */
.connect-insights .ci-shot--flush {
  border: none;
  border-bottom: 1px solid var(--infine-blue-light-fade);
  border-radius: 0;
}
/* The illustration is pre-cropped to the frame's 16:10, so cover never
   actually crops — it just guards against rounding drift. */
.connect-insights img.ci-shot {
  display: block;
  width: 100%;
  object-fit: cover;
}

/* ---- free / fee pricing pair + example analyses ---- */
.connect-insights .ci-offer { padding: 52px var(--ci-inset) 60px; }
.connect-insights .ci-pricing {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
}
.connect-insights .ci-price-card {
  display: flex;
  flex-direction: column;
  gap: 14px;
  background: #fff;
  border: 1px solid var(--infine-blue-light-fade);
  border-radius: 16px;
  box-shadow: var(--co-card-shadow);
  padding: 26px 28px;
}
.connect-insights .ci-price-card--free {
  background: var(--infine-green-bg);
  border-color: var(--infine-green-fade);
  box-shadow: none;
}
.connect-insights .ci-price-card__icon {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: var(--infine-blue-bg);
  border: 1px solid var(--infine-blue-light-fade);
  color: var(--infine-blue);
}
.connect-insights .ci-price-card--free .ci-price-card__icon {
  background: #fff;
  border-color: var(--infine-green-fade);
  color: var(--infine-green-bright);
}
.connect-insights .ci-price-card__body {
  font-size: 17px;
  line-height: 1.65;
  color: var(--infine-text);
  margin: 0;
}

.connect-insights .ci-examples__head {
  font-family: var(--mantine-font-family-headings);
  font-weight: 600;
  font-size: 18px;
  color: var(--infine-blue);
  margin: 44px 0 0;
}
.connect-insights .ci-examples__list {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  margin-top: 18px;
}
.connect-insights .ci-example {
  display: flex;
  flex-direction: column;
  background: #fff;
  border: 1px solid var(--infine-blue-light-fade);
  border-radius: 16px;
  box-shadow: var(--co-card-shadow);
  overflow: hidden;
}
.connect-insights .ci-example__title {
  font-family: var(--mantine-font-family-headings);
  font-weight: 600;
  font-size: 15.5px;
  line-height: 1.42;
  color: var(--infine-blue);
  margin: 0;
  padding: 18px 20px 22px;
}

/* ---- blue band spacing (sits directly above the navy band) ---- */
.connect-insights .ci-band--blue { margin-bottom: 30px; }

/* ---- navy contact band ---- */
.connect-insights .ci-mail-link {
  color: #fff;
  font-weight: 700;
  text-decoration-color: color-mix(in srgb, var(--co-status-orange) 90%, transparent);
  text-underline-offset: 3px;
}
.connect-insights .ci-mail-link:hover { text-decoration-color: #fff; }
.connect-insights .ci-cta-row { display: flex; margin-top: 10px; }
.connect-insights .ci-cta {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: var(--co-status-orange);
  color: #fff;
  font-family: var(--mantine-font-family-headings);
  font-weight: 700;
  font-size: 15px;
  text-decoration: none;
  border-radius: 12px;
  padding: 14px 22px;
  transition: background 0.18s ease, transform 0.18s ease;
}
.connect-insights .ci-cta:hover {
  background: color-mix(in srgb, var(--infine-yellow-bright) 94%, white);
  transform: translateY(-1px);
}

/* ---- narrow frames: stack the two-column layouts ---- */
@media (max-width: 1080px) {
  .connect-insights .ci-intro,
  .connect-insights .ci-band__grid,
  .connect-insights .ci-band__grid--text-first { grid-template-columns: 1fr; gap: 28px; }
  /* Keep prose above its screenshot when the columns stack. */
  .connect-insights .ci-band--blue .ci-band__grid { display: flex; flex-direction: column-reverse; }
  .connect-insights .ci-examples__list { grid-template-columns: 1fr; }
  .connect-insights .ci-pricing { grid-template-columns: 1fr; }
}
}