/* Task-led solutions. These diagrams are explanatory layouts, not product UI. */
.homepage-solutions { padding: 88px 0 96px; background: #edf3ef; }
.homepage-solutions .section-heading { margin-bottom: 40px; }
.homepage-solutions .section-intro { max-width: 25em; font-size: 16px; }
.homepage-solutions .solution-grid { gap: 28px; align-items: stretch; }
.homepage-solutions .solution-card {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border: 1px solid #d2dfd6;
  border-radius: 6px;
  background: #fcfdfa;
  scroll-margin-top: 96px;
}
.solution-card-copy { padding: 28px 30px 22px; }
.solution-category { display: flex; gap: 12px; align-items: center; font: 500 12px/1.6 Arial, sans-serif; letter-spacing: .12em; color: #537365; }
.solution-category span { color: var(--green); letter-spacing: 0; }
.solution-card-copy h3 { font-size: 26px; line-height: 1.5; letter-spacing: -.035em; margin-top: 12px; }
.solution-promise { font-size: 17px; font-weight: 550; color: var(--green); margin-top: 10px; }
.solution-description { margin-top: 9px; color: #52685d; font-size: 16px; line-height: 1.9; text-wrap: pretty; }
.solution-diagram {
  height: 252px;
  margin: auto 22px 0;
  flex: none;
  position: relative;
  border-radius: 3px;
  background: #e9f1eb;
  overflow: hidden;
  padding: 24px;
}
.solution-card-foot { min-height: 68px; display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 17px 30px; }
.solution-card-foot > span { font-size: 12px; color: #657d6e; }
.solution-open { background: transparent; padding: 4px 0; display: inline-flex; align-items: center; gap: 14px; font-size: 14px; font-weight: 550; white-space: nowrap; }
.solution-open:hover { color: var(--green); }
.solution-open .action-arrow { transition: transform .18s; }
.solution-open:hover .action-arrow { transform: translateX(3px); }
.diagram-star { width: 22px; height: 22px; color: var(--green); flex: none; }
.diagram-query { display: flex; align-items: center; gap: 12px; background: #fff; border: 1px solid #bad2c2; border-radius: 4px; padding: 12px 16px; font-size: 15px; box-shadow: 0 4px 12px #123e3306; }
.diagram-query > svg { width: 19px; height: 19px; color: var(--green); flex: none; }
.search-connector { width: 1px; height: 21px; margin: auto; background: #83af94; }
.search-results { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 12px; }
.search-result { min-width: 0; padding: 13px 7px 11px; background: #fcfdfa; border: 1px solid #cbdcd0; border-radius: 3px; text-align: center; font-size: 13px; }
.search-result.is-selected { border-color: var(--green); box-shadow: inset 0 3px var(--green); }
.search-result svg { display: block; width: 62px; height: 58px; margin: 0 auto 6px; color: var(--deep); }
.document-diagram { padding: 21px 28px 0; background: #eaf0e7; }
.document-sources { display: flex; justify-content: center; align-items: center; gap: 10px; font-size: 13px; }
.document-sources span { padding: 4px 10px; border: 1px solid #c7d8c8; border-radius: 3px; background: #f6faf3; }
.document-sheet { position: relative; margin: 17px auto 0; max-width: 332px; padding: 20px 24px; background: #fff; border: 1px solid #c9d9cd; border-radius: 3px 3px 0 0; box-shadow: 6px 6px 0 #d7e6d8; }
.document-sheet::before { content: ''; position: absolute; left: 50%; bottom: 100%; height: 18px; border-left: 1px solid #7fa18a; }
.document-sheet-heading { display: flex; justify-content: space-between; align-items: center; gap: 10px; font-size: 20px; font-weight: 600; }
.document-sheet-row { display: flex; align-items: center; gap: 15px; padding: 10px 0; border-top: 1px solid #e0e9e0; font-size: 13px; }
.document-sheet-row:first-of-type { margin-top: 12px; }
.document-sheet-row span { color: #4c8a67; font: 12px Arial,sans-serif; }
.review-diagram { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; padding: 20px; background: #e8f0ed; }
.review-lane { padding: 16px 13px; background: #fcfdfa; border: 1px solid #cbdcd1; border-radius: 3px; min-width: 0; }
.review-lane-heading { display: flex; align-items: center; gap: 7px; font-size: 15px; font-weight: 600; white-space: nowrap; }
.review-lane-heading .diagram-star { width: 18px; height: 18px; }
.review-scope { font-size: 12px; color: #64796a; margin: 4px 0 14px; line-height: 1.6; }
.review-criteria { display: grid; gap: 8px; font-size: 13px; }
.review-criteria span { display: flex; align-items: center; gap: 7px; }
.review-criteria svg { width: 14px; height: 14px; color: var(--green); flex: none; }
.review-team { display: flex; align-items: center; gap: 7px; margin-top: 20px; }
.review-team span { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 50%; background: #d9eee0; border: 1px solid #abcdb6; font-size: 12px; }
.review-team span:nth-child(2) { background: #ecf2de; }
.review-team span:nth-child(3) { background: #e5eee9; }
.review-thread { display: flex; flex-direction: column; gap: 7px; margin-top: 14px; }
.review-thread i { display: block; width: 92%; height: 8px; border-radius: 2px; background: #d3e5d9; }
.review-thread i:last-child { width: 65%; align-self: flex-end; background: #bcd9c5; }
.assembly-diagram { padding: 20px 24px 0; background: #e6eee8; }
.assembly-flow { display: flex; align-items: center; justify-content: center; gap: 10px; font-size: 13px; margin-bottom: 18px; }
.assembly-flow span { white-space: nowrap; }
.assembly-flow svg { width: 14px; height: 14px; flex: none; color: #709c80; }
.assembly-screen { width: 90%; max-width: 374px; margin: auto; border: 1px solid #b8d0c0; border-radius: 3px 3px 0 0; box-shadow: 0 6px 20px #123e330c; }
.assembly-screen img { width: 100%; height: auto; }
.solution-dialog { width: min(720px,calc(100% - 36px)); }
.solution-dialog h3 { font-size: 19px; margin-top: 25px; }
.solution-dialog .solution-availability { padding: 16px 18px; background: #ecf3ec; border-radius: 3px; font-size: 13px; }
.solution-dialog ul { font-size: 15px; line-height: 1.9; }
.solution-dialog li + li { margin-top: 8px; }
@media (min-width: 1001px) and (max-width: 1200px) {
  .solution-card-copy { padding-inline: 24px; }
  .solution-card-copy h3 { font-size: 24px; }
  .solution-diagram { margin-inline: 16px; padding-inline: 20px; }
  .review-diagram { padding-inline: 14px; gap: 10px; }
  .review-lane { padding-inline: 11px; }
  .review-lane-heading { font-size: 14px; }
  .solution-card-foot { padding-inline: 24px; }
}
/* Basic reflow only; detailed mobile art direction follows desktop approval. */
@media (max-width: 1000px) {
  .homepage-solutions .section-heading { display: block; }
  .homepage-solutions .section-intro { margin-top: 20px; }
  .homepage-solutions .solution-grid { grid-template-columns: 1fr; max-width: 620px; margin-inline: auto; }
}
@media (max-width: 600px) {
  .homepage-solutions { padding-block: 64px; }
  .solution-card-copy { padding: 24px 20px 20px; }
  .solution-card-copy h3 { font-size: 23px; }
  .solution-promise { font-size: 16px; }
  .solution-diagram { margin-inline: 12px; padding-inline: 14px; }
  .review-diagram { gap: 8px; padding: 18px 10px; }
  .review-lane { padding: 14px 8px; }
  .review-lane-heading { font-size: 12px; gap: 4px; }
  .review-team { gap: 4px; }
  .review-team span { width: 32px; height: 32px; font-size: 11px; }
  .solution-card-foot { padding-inline: 20px; }
  .solution-card-foot > span { font-size: 11px; }
}