/* A focused showcase for reusable workflows and supported AI workspaces. */
.overview-connect { background: #f7f9fc; }
.overview-connect .overview-inner { max-width: 76rem; }
.connect-heading { display: grid; grid-template-columns: 1.2fr 1fr; gap: 3rem; align-items: end; margin-bottom: 2.5rem; }
.connect-heading h2 { margin: 1rem 0 0; color: #22264c; font-size: clamp(2rem, 3vw, 2.75rem); line-height: 1.35; }
.connect-heading h2 em { font-style: normal; color: #3036cb; }
.connect-heading > p { max-width: 24rem; margin: 0 0 .25rem auto; color: #777b92; font-size: 1rem; line-height: 1.8; }
.connect-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.5rem; }
.connect-card { min-width: 0; display: flex; flex-direction: column; padding: 2rem; border: 1px solid #e2e5ef; border-radius: 1.5rem; background: #fff; box-shadow: 0 .75rem 2rem #26386c05; }
.connect-card-copy { min-height: 8.25rem; }
.connect-label { display: flex; align-items: center; gap: .625rem; color: #686d85; font-size: .6875rem; font-weight: 600; letter-spacing: .08em; }
.connect-label > span { display: grid; place-items: center; width: 1.625rem; height: 1.625rem; border-radius: .5rem; background: #f0f2fb; color: #575ccb; font-size: .625rem; letter-spacing: 0; }
.connect-card h3 { margin: 1rem 0 .625rem; color: #242849; font-size: 1.625rem; line-height: 1.4; }
.connect-card-copy p { max-width: 31rem; margin: 0; color: #7a7e90; font-size: .9375rem; line-height: 1.8; }
.connect-template-scene, .connect-tool-scene { position: relative; margin: 1.5rem 0; border: 1px solid #e9ebf5; border-radius: 1rem; background: #f7f8fd; }
.connect-template-scene { padding: 1rem 1.125rem; }
.connect-scene-caption { display: flex; justify-content: space-between; align-items: center; margin-bottom: .75rem; color: #8b8fa4; font-size: .625rem; letter-spacing: .04em; }
.connect-scene-dots { font-size: .875rem; letter-spacing: .18em; }
.connect-template-row { display: flex; align-items: center; gap: .875rem; padding: .75rem .875rem; border: 1px solid #e6e8f1; border-radius: .75rem; background: #fff; box-shadow: 0 .1875rem .5rem #25306203; }
.connect-template-row + .connect-template-row { margin-top: .625rem; }
.connect-template-icon { display: grid; flex: 0 0 2.375rem; height: 2.375rem; place-items: center; border-radius: .625rem; background: #eeedff; color: #7261ca; }
.connect-template-icon--1 { background: #eaf5f1; color: #49977f; }
.connect-template-icon--2 { background: #fff3e7; color: #b78750; }
.connect-template-icon svg { width: 1.25rem; height: 1.25rem; }
.connect-template-row strong { display: block; color: #474c65; font-size: .8125rem; font-weight: 500; line-height: 1.5; }
.connect-template-row > div > span { display: block; margin-top: .125rem; color: #a0a4b6; font-size: .625rem; line-height: 1.5; }
.connect-template-use { margin-left: auto; color: #abb0c2; font-size: 1rem; }
.connect-tool-scene { height: 16.25rem; flex: 1 0 16.25rem; background: radial-gradient(ellipse at 50% 88%, #eaeafd, transparent 65%), #f8f9fd; }
.connect-routes { position: absolute; inset: 0; width: 100%; height: 100%; color: #ccd0e6; }
.connect-tool { position: absolute; top: 1.25rem; display: flex; width: 7rem; height: 3.75rem; justify-content: center; align-items: center; gap: .5rem; transform: translateX(-50%); border: 1px solid #e3e6ef; border-radius: .875rem; background: #fff; box-shadow: 0 .375rem .75rem #3c426408; }
.connect-tool--0 { left: 18%; }
.connect-tool--1 { left: 50%; }
.connect-tool--2 { left: 82%; }
.connect-tool img { width: 1.875rem; height: 1.875rem; }
.connect-tool > span { color: #424761; font-size: .75rem; font-weight: 500; }
.connect-protocol { position: absolute; top: 45%; left: 50%; transform: translateX(-50%); padding: .25rem .75rem; border: 1px solid #e8eaf5; border-radius: 2rem; background: #f8f9fd; color: #75799a; font-size: .6875rem; white-space: nowrap; }
.connect-protocol > span { color: #bdc0d1; padding-inline: .125rem; }
.connect-hub { position: absolute; top: 64%; left: 50%; display: flex; width: max-content; align-items: center; gap: .625rem; transform: translateX(-50%); padding: .75rem 1rem; border: 1px solid #dce0f3; border-radius: 1rem; background: #fff; box-shadow: 0 .75rem 1.25rem #5257a912; }
.connect-hub img { flex: none; width: 2.125rem; height: 2.125rem; }
.connect-hub strong { color: #363b7a; font-size: .9375rem; font-weight: 600; }
.connect-hub-dot { flex: none; width: .375rem; height: .375rem; margin-left: .75rem; border-radius: 50%; background: #6da58d; box-shadow: 0 0 0 .1875rem #edf6f1; }
.connect-card-footer { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .75rem; margin-top: auto; padding-top: .75rem; }
.connect-card-footer a { display: inline-flex; align-items: center; gap: .5rem; color: #4047c8; font-size: .75rem; font-weight: 600; text-decoration: none; white-space: nowrap; }
.connect-card-footer a:hover { color: #2127a1; text-decoration: underline; text-underline-offset: .25rem; }
.connect-card-footer a:focus-visible { outline: 2px solid #777de0; outline-offset: .375rem; border-radius: .125rem; }
.connect-steps { display: flex; flex-wrap: wrap; gap: .375rem; padding: 0; margin: 0; list-style: none; color: #969aad; font-size: .625rem; }
.connect-steps li + li::before { content: "→"; padding-right: .375rem; color: #bcc0cf; }
.connect-footnote { color: #969aad; font-size: .625rem; line-height: 1.6; }
@media (max-width: 991px) {
  .connect-heading { gap: 1.5rem; }
  .connect-card { padding: 1.5rem; }
  .connect-card h3 { font-size: 1.375rem; }
  .connect-card-copy { min-height: 10rem; }
  .connect-tool { width: 5rem; gap: .375rem; }
  .connect-tool img { width: 1.375rem; height: 1.375rem; }
  .connect-tool > span { font-size: .625rem; }
}
@media (max-width: 767px) {
  .connect-heading, .connect-grid { grid-template-columns: 1fr; }
  .connect-heading { gap: .875rem; margin-bottom: 1.75rem; }
  .connect-heading h2 { font-size: clamp(1.625rem, 5.5vw, 2rem); }
  .connect-heading > p { margin: 0; max-width: none; font-size: .9375rem; }
  .connect-card { padding: 1.25rem; border-radius: 1.25rem; }
  .connect-card-copy { min-height: 0; }
  .connect-card h3 { font-size: 1.375rem; }
  .connect-template-scene { padding: .875rem; }
  .connect-template-row { gap: .625rem; padding: .75rem .625rem; }
  .connect-tool-scene { height: 15rem; flex-basis: 15rem; }
  .connect-tool { width: 4.25rem; height: 4rem; flex-direction: column; gap: .375rem; }
  .connect-tool img { width: 1.625rem; height: 1.625rem; }
  .connect-card-footer { padding-top: .25rem; }
}