/* How-it-works section for the public infographic showcase. */
#infographic-how.how-section {
  --how-ink: var(--ink, #173447);
  --how-navy: var(--navy, #123047);
  --how-muted: var(--muted, #5b707b);
  --how-line: var(--line, #d5dfdc);
  --demo-teal: #146c78;
  --demo-teal-deep: #0c4d5b;
  --demo-navy: var(--how-navy);
  scroll-margin-top: 110px;
  max-width: 1380px;
  margin: 0 auto;
  padding: clamp(38px, 6vw, 76px) clamp(18px, 5vw, 64px);
  color: var(--how-ink);
}

#infographic-how.how-section > header {
  max-width: 740px;
  margin: 0 auto clamp(24px, 3.5vw, 38px);
  text-align: center;
}

#infographic-how.how-section > header h2 {
  margin: 0;
  color: var(--how-navy);
  font-size: clamp(27px, 3.8vw, 38px);
  font-weight: 800;
  line-height: 1.12;
  letter-spacing: -.045em;
  text-wrap: balance;
}

#infographic-how .how-steps {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 13px;
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: how-step;
}

#infographic-how .how-step {
  min-width: 0;
  padding: 18px;
  background: linear-gradient(150deg, var(--cat-soft, #eef4f8), #fffefa 76%);
  border: 1px solid var(--how-line);
  border-top: 3px solid var(--cat-color, #346db1);
  border-radius: 14px;
  box-shadow: 0 8px 22px rgba(18, 48, 71, .045);
}

#infographic-how .how-step-head {
  display: flex;
  align-items: center;
  gap: 9px;
  margin-bottom: 15px;
}

#infographic-how .how-number {
  display: inline-grid;
  width: 29px;
  height: 29px;
  flex: 0 0 auto;
  place-items: center;
  color: #fff;
  background: var(--cat-color, #346db1);
  border-radius: 9px;
  font-size: 12px;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  line-height: 1;
}

#infographic-how .category-chip.how-icon-chip {
  display: inline-grid;
  width: 38px;
  height: 38px;
  flex: 0 0 auto;
  place-items: center;
  color: var(--cat-color, var(--primary, #146c78));
  background: var(--cat-soft, #e7f4f3);
  border: 1px solid color-mix(in srgb, var(--cat-color, #146c78) 15%, transparent);
  border-radius: 11px;
}

#infographic-how .category-chip.how-icon-chip svg {
  display: block;
  width: 21px;
  height: 21px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

#infographic-how .how-step h3,
#infographic-how .how-highlight h3 {
  margin: 0 0 7px;
  color: var(--how-navy);
  font-size: 15px;
  font-weight: 800;
  line-height: 1.35;
  letter-spacing: -.02em;
}

#infographic-how .how-step p,
#infographic-how .how-highlight p {
  margin: 0;
  color: var(--how-muted);
  font-size: 12px;
  line-height: 1.62;
}

#infographic-how .how-highlights {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  margin-top: clamp(18px, 2.8vw, 28px);
}

#infographic-how .how-highlight {
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr);
  align-items: start;
  gap: 12px;
  min-width: 0;
  padding: 16px;
  background: #fffefa;
  border: 1px solid var(--how-line);
  border-radius: 13px;
  box-shadow: 0 6px 18px rgba(18, 48, 71, .035);
}

#infographic-how .how-highlight .category-chip.how-icon-chip {
  width: 42px;
  height: 42px;
  grid-row: span 2;
  border: 0;
  border-radius: 12px;
}

#infographic-how .how-highlight .category-chip.how-icon-chip svg {
  width: 22px;
  height: 22px;
}

#infographic-how .how-highlight h3 {
  align-self: end;
  margin: 1px 0 4px;
  font-size: 13px;
}

#infographic-how .how-highlight p {
  grid-column: 2;
  font-size: 11px;
  line-height: 1.55;
}

#infographic-how .how-highlight:nth-child(1) .how-icon-chip {
  --cat-color: var(--cat-meetings, #167b82);
  --cat-soft: var(--cat-meetings-soft, #e7f4f3);
}

#infographic-how .how-highlight:nth-child(2) .how-icon-chip {
  --cat-color: var(--cat-crm, #cc675b);
  --cat-soft: var(--cat-crm-soft, #fbefec);
}

#infographic-how .how-highlight:nth-child(3) .how-icon-chip {
  --cat-color: var(--cat-reports, #4c5fab);
  --cat-soft: var(--cat-reports-soft, #edf0f9);
}

#infographic-how > .commodity-demo-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 9px;
  margin: clamp(22px, 3vw, 34px) auto 0;
}

#infographic-how > .commodity-demo-actions a {
  max-width: 100%;
}

#infographic-how :focus-visible {
  outline: 3px solid #bc8123;
  outline-offset: 3px;
}

@media (max-width: 900px) {
  #infographic-how .how-steps {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  #infographic-how .how-highlights {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 520px) {
  #infographic-how.how-section {
    padding: 34px 16px;
  }

  #infographic-how.how-section > header {
    margin-bottom: 21px;
    text-align: left;
  }

  #infographic-how.how-section > header h2 {
    font-size: clamp(26px, 8vw, 32px);
  }

  #infographic-how .how-steps {
    grid-template-columns: minmax(0, 1fr);
    gap: 10px;
  }

  #infographic-how .how-step {
    padding: 16px;
  }

  #infographic-how .how-step-head {
    margin-bottom: 11px;
  }

  #infographic-how .how-highlights {
    gap: 9px;
    margin-top: 18px;
  }
}

@media (max-width: 375px) {
  #infographic-how.how-section {
    padding-right: 12px;
    padding-left: 12px;
  }

  #infographic-how .how-step,
  #infographic-how .how-highlight {
    padding: 14px;
  }

  #infographic-how > .commodity-demo-actions {
    align-items: stretch;
    flex-direction: column;
  }

  #infographic-how > .commodity-demo-actions a {
    width: 100%;
  }
}

@media (prefers-reduced-motion: reduce) {
  #infographic-how *,
  #infographic-how *::before,
  #infographic-how *::after {
    scroll-behavior: auto !important;
    animation: none !important;
    transition: none !important;
  }
}

/* Section-to-section breathing room is supplied by neighboring 32px insets, not 76px padding. */
#infographic-how.how-section{padding-top:32px;padding-bottom:32px}
#infographic-how.how-section>header{margin-bottom:28px}
@media(max-width:700px){
  #infographic-how.how-section{padding-top:20px;padding-bottom:20px;scroll-margin-top:150px}
}