/* Meaningful line icons shared by the hero and the decision section. */
.meaning-icon {
  display: block;
  flex: none;
  width: 24px;
  height: 24px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.65;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.hero .bicon {
  width: 40px;
  height: 40px;
  border-radius: 12px;
  color: var(--green);
  background: rgba(68, 160, 101, .055);
}
.hero .bicon .meaning-icon { width: 22px; height: 22px; }

/* Compact square composition, with the same scene height and rounded clipping. */
#how {
  --decision-flow-gap: 38px;
  --decision-overhang: 28px;
  background: var(--surface-section);
}
#how .chess-layout { gap: 52px; }
#how .decision-copy { min-width: 0; }
#how .decision-visual {
  position: relative;
  width: calc(.75 * (100% + 2 * var(--decision-overhang)));
  min-width: 0;
  max-width: none;
  aspect-ratio: 1;
  justify-self: center;
  align-self: end;
  /* Follow the same gap as the cards: the visible bottom meets their top edge. */
  transform: translateY(var(--decision-flow-gap));
  margin: 0;
  overflow: hidden;
  border: 0;
  border-radius: var(--radius);
  background: transparent;
  box-shadow: none;
}
#how .decision-visual img {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
  filter: saturate(.75) brightness(.95);
}

/* Short benefits stay as statements, with no extra headline level. */
#how .benefit-line {
  gap: 14px;
  position: relative;
  z-index: 1;
  margin: calc(var(--decision-flow-gap) + 30px) 0 0;
  padding: 0;
  list-style: none;
}
#how .benefit-line > li {
  display: flex;
  align-items: center;
  gap: 14px;
  min-width: 0;
  padding: 21px 18px;
  border: 1px solid var(--border);
  border-radius: 14px;
  background: var(--surface-panel);
  color: var(--text-secondary);
  font: 400 14px/1.5 var(--font-body);
  text-wrap: pretty;
}
#how .benefit-icon {
  display: grid;
  flex: none;
  place-items: center;
  width: 28px;
  height: 28px;
  color: var(--green);
}
@media (max-width: 1100px) {
  #how { --decision-overhang: 12px; }
  #how .chess-layout { gap: 32px; }
  #how .benefit-line { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 840px) {
  #how { --decision-flow-gap: 24px; --decision-overhang: 14px; }
  #how .chess-layout { gap: 30px; }
}
@media (max-width: 575px) {
  #how .decision-visual { border-radius: 14px; }
  #how .benefit-line { grid-template-columns: minmax(0, 1fr); gap: 10px; }
  #how .benefit-line > li { gap: 14px; padding: 17px 18px; }
  #how .benefit-line > li > span:last-child { max-width: 32ch; }
}


/* Preserve the previous enlarged scene height: old 4:3 width × .75.
   The square image fits the page grid without bleeding into the outer gutter. */
#how > .wrap { container-type: inline-size; }
@media (min-width: 1200px) {
  #how .chess-layout {
    --decision-target-size: calc(.9375 * ((100cqw - 52px) / 2 + 56px));
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 52px;
  }
  #how .decision-visual {
    width: var(--decision-target-size);
    justify-self: end;
  }
}