.solution-page {
  background: #fff;
  color: var(--ink-900);
  overflow: hidden
}

.solution-page * {
  box-sizing: border-box
}

.solution-wrap {
  width: min(var(--container), calc(100% - 48px));
  margin: 0 auto
}

.solution-hero {
  background: linear-gradient(130deg, #eff6ff, #fff 52%, #edf9f6)
}

.solution-hero-grid {
  display: grid;
  grid-template-columns: 1fr .9fr;
  gap: 65px;
  align-items: center;
  min-height: 640px;
  padding: 65px 0
}

.solution-kicker,
.solution-heading>p,
.solution-cta p {
  margin: 0 0 13px;
  color: var(--brand-600);
  font-size: 11px;
  font-weight: 850;
  letter-spacing: .14em
}

.solution-hero h1 {
  margin: 0 0 22px;
  font-size: clamp(42px, 5vw, 69px);
  font-weight: 850;
  line-height: 1.08;
  letter-spacing: -.045em
}

.solution-hero h1 em {
  color: var(--brand-teal);
  font-style: normal
}

.solution-hero p:not(.solution-kicker) {
  max-width: 590px;
  color: var(--ink-500);
  font-size: 18px;
  line-height: 1.8
}

.solution-hero a {
  display: inline-flex;
  margin-top: 20px;
  padding: 14px 20px;
  border-radius: 11px;
  background: var(--brand-coral);
  color: #fff;
  font-weight: 800;
  text-decoration: none
}

.solution-flow-art {
  position: relative;
  min-height: 440px
}

.flow-node {
  position: absolute;
  z-index: 2;
  display: grid;
  place-items: center;
  border-radius: 25px;
  background: #fff;
  color: var(--ink-900);
  font-weight: 850;
  text-align: center;
  box-shadow: 0 22px 50px rgba(23, 50, 77, .15)
}

.node-user {
  left: 0;
  top: 150px;
  width: 140px;
  height: 100px;
  border: 3px solid #c8d9ed
}

.node-cloud {
  left: 50%;
  top: 80px;
  width: 180px;
  height: 180px;
  border-radius: 50%;
  background: var(--brand-500);
  color: #fff;
  transform: translateX(-50%)
}

.node-cloud b,
.node-printer b {
  font-size: 28px
}

.node-printer {
  right: 0;
  bottom: 50px;
  width: 150px;
  height: 120px;
  border: 3px solid #bce3da
}

.flow-line {
  position: absolute;
  z-index: 1;
  height: 4px;
  background: linear-gradient(90deg, var(--brand-500), var(--brand-teal));
  transform-origin: left
}

.line-one {
  left: 112px;
  top: 180px;
  width: 175px;
  transform: rotate(-17deg)
}

.line-two {
  left: 58%;
  top: 225px;
  width: 170px;
  transform: rotate(18deg)
}

.flow-tag {
  position: absolute;
  z-index: 3;
  padding: 7px 10px;
  border-radius: 999px;
  background: var(--brand-gold);
  font-size: 9px;
  font-weight: 850
}

.tag-one {
  left: 25%;
  top: 115px
}

.tag-two {
  right: 8%;
  top: 205px;
  background: #fff0eb;
  color: var(--brand-coral)
}

.path-finder {
  padding: 95px 0;
  background: #f7f9fc
}

.solution-heading {
  max-width: 760px;
  margin-bottom: 35px
}

.solution-heading h2 {
  margin: 0 0 12px;
  font-size: clamp(30px, 3.5vw, 47px);
  line-height: 1.22;
  letter-spacing: -.035em
}

.solution-heading>span {
  color: var(--ink-500);
  font-size: 15px
}

.goal-tabs {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  margin-bottom: 25px
}

.goal-tabs button {
  min-height: 100px;
  padding: 17px;
  border: 1px solid #dce5ef;
  border-radius: 16px;
  background: #fff;
  color: var(--ink-500);
  font: 700 14px/1.5 var(--font-sans);
  cursor: pointer
}

.goal-tabs b {
  display: block;
  margin-bottom: 4px;
  color: var(--brand-500);
  font-size: 22px
}

.goal-tabs button:hover,
.goal-tabs button.is-active {
  border-color: var(--brand-500);
  background: #edf4fd;
  color: var(--ink-900);
  box-shadow: 0 10px 25px rgba(23, 50, 77, .08)
}

.solution-paths {
  display: grid;
  gap: 18px
}

.solution-card {
  display: grid;
  grid-template-columns: 310px 1fr;
  gap: 35px;
  position: relative;
  overflow: hidden;
  padding: 28px;
  border: 1px solid #dce5ef;
  border-radius: 23px;
  background: #fff;
  opacity: .7;
  transition: opacity .2s, transform .2s, box-shadow .2s
}

.solution-card.is-active {
  opacity: 1;
  transform: translateY(-3px);
  border-color: #adc5e1;
  box-shadow: 0 20px 42px rgba(23, 50, 77, .12)
}

.path-badge {
  position: absolute;
  z-index: 2;
  top: 16px;
  left: 17px;
  padding: 6px 9px;
  border-radius: 999px;
  background: #fff;
  color: var(--brand-600);
  font-size: 9px;
  font-weight: 850;
  letter-spacing: .1em
}

.path-visual {
  display: grid;
  place-items: center;
  min-height: 270px;
  overflow: hidden;
  border-radius: 17px;
  background: #eaf2fc
}

.path-local {
  background: #e8f7f2
}

.path-custom {
  background: #fff1ec
}

.path-visual img {
  width: 100%;
  height: 100%;
  object-fit: cover
}

.path-content {
  padding: 12px 10px
}

.path-content small {
  color: var(--brand-600);
  font-weight: 800;
  letter-spacing: .11em
}

.path-content h3 {
  margin: 8px 0 10px;
  font-size: 28px
}

.path-content>p {
  color: var(--ink-500);
  line-height: 1.75
}

.path-content ul {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  margin: 20px 0;
  padding: 0;
  list-style: none
}

.path-content li {
  padding: 11px;
  border-radius: 10px;
  background: #f5f8fb;
  color: var(--ink-500);
  font-size: 12px;
  line-height: 1.5
}

.path-content a {
  color: var(--brand-600);
  font-weight: 800;
  text-decoration: none
}

.integration-steps {
  padding: 95px 0
}

.integration-steps ol {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
  margin: 0;
  padding: 0;
  border: 1px solid #dce5ef;
  border-radius: 22px;
  list-style: none;
  overflow: hidden
}

.integration-steps li {
  min-height: 230px;
  padding: 28px;
  border-right: 1px solid #dce5ef
}

.integration-steps li:last-child {
  border: 0
}

.integration-steps li>span {
  color: var(--brand-coral);
  font-weight: 850
}

.integration-steps h3 {
  margin: 38px 0 10px;
  font-size: 20px
}

.integration-steps p {
  color: var(--ink-500);
  line-height: 1.7
}

.solution-gallery {
  padding: 90px 0;
  background: var(--ink-900)
}

.solution-gallery .solution-heading h2 {
  color: #fff
}

.solution-gallery .solution-heading>p {
  color: #8fc0ff
}

.gallery-track {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 10px
}

.gallery-track button {
  height: 175px;
  padding: 0;
  overflow: hidden;
  border: 0;
  border-radius: 13px;
  background: #fff;
  cursor: zoom-in
}

.gallery-track button:nth-child(1),
.gallery-track button:nth-child(8) {
  grid-column: span 2
}

.gallery-track img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .25s
}

.gallery-track button:hover img {
  transform: scale(1.06)
}

.solution-cta {
  padding: 75px 0;
  background: var(--brand-500);
  color: #fff
}

.solution-cta .solution-wrap {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 40px
}

.solution-cta p {
  color: #cbe0ff
}

.solution-cta h2 {
  margin: 0;
  color: #fff;
  font-size: 33px
}

.solution-cta a {
  flex: none;
  padding: 14px 20px;
  border-radius: 10px;
  background: #fff;
  color: var(--brand-600);
  font-weight: 800;
  text-decoration: none
}

@media(max-width:960px) {
  .solution-hero-grid {
    grid-template-columns: 1fr
  }

  .solution-flow-art {
    max-width: 650px
  }

  .solution-card {
    grid-template-columns: 260px 1fr
  }

  .path-content ul {
    grid-template-columns: 1fr
  }

  .integration-steps ol {
    grid-template-columns: repeat(2, 1fr)
  }

  .integration-steps li:nth-child(2) {
    border-right: 0
  }

  .integration-steps li:nth-child(-n+2) {
    border-bottom: 1px solid #dce5ef
  }

  .gallery-track {
    grid-template-columns: repeat(4, 1fr)
  }
}

@media(max-width:650px) {
  .solution-wrap {
    width: min(100% - 32px, var(--container))
  }

  .solution-hero-grid {
    padding: 45px 0
  }

  .solution-hero h1 {
    font-size: 41px
  }

  .solution-flow-art {
    min-height: 330px;
    transform: scale(.82);
    margin: -30px
  }

  .goal-tabs {
    grid-template-columns: 1fr
  }

  .solution-card {
    grid-template-columns: 1fr;
    padding: 17px
  }

  .path-visual {
    min-height: 230px
  }

  .integration-steps ol {
    grid-template-columns: 1fr
  }

  .integration-steps li {
    min-height: 0;
    border-right: 0;
    border-bottom: 1px solid #dce5ef !important
  }

  .gallery-track {
    grid-template-columns: repeat(2, 1fr)
  }

  .gallery-track button {
    height: 150px
  }

  .solution-cta .solution-wrap {
    display: block
  }

  .solution-cta a {
    display: inline-flex;
    margin-top: 22px
  }
}

/* Match each workflow illustration to a landscape frame instead of stretching it vertically. */
.solution-page .path-visual {
  min-height: 0;
  aspect-ratio: 4 / 3;
  align-self: center;
}

.solution-page .path-visual img {
  padding: 10px;
}

@media (max-width: 650px) {
  .solution-page .path-visual {
    min-height: 0;
  }
}

/* Product results use their native proportions: no fixed-height letterboxing or cropped output. */
.solution-page .solution-gallery .gallery-track {
  display: block;
  columns: 4 220px;
  column-gap: 12px;
}

.solution-page .solution-gallery .gallery-track button:nth-child(n) {
  display: inline-block;
  width: 100%;
  height: auto;
  margin: 0 0 12px;
  aspect-ratio: auto;
  break-inside: avoid;
  vertical-align: top;
  border: 1px solid rgba(255, 255, 255, .12);
  border-radius: 15px;
  box-shadow: 0 12px 28px rgba(4, 14, 35, .2);
  transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease;
}

.solution-page .solution-gallery .gallery-track button:hover {
  transform: translateY(-3px);
  border-color: rgba(112, 192, 160, .58);
  box-shadow: 0 18px 34px rgba(4, 14, 35, .3);
}

.solution-page .solution-gallery .gallery-track img {
  display: block;
  width: 100%;
  height: auto;
  padding: 0;
  object-fit: contain;
  border-radius: 14px;
}

.solution-page .solution-gallery .gallery-track button:hover img {
  transform: none;
}

@media (max-width: 760px) {
  .solution-page .solution-gallery .gallery-track {
    columns: 2;
    column-gap: 9px;
  }

  .solution-page .solution-gallery .gallery-track button:nth-child(n) {
    margin-bottom: 9px;
    border-radius: 12px;
  }

  .solution-page .solution-gallery .gallery-track img {
    border-radius: 11px;
  }
}