/* Each benefit has its own explanatory image; keep the reading order on small screens. */
.product-features { display: grid; gap: 32px; }
.feature-panel {
  display: grid;
  grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr);
  grid-template-areas: "copy visual";
  align-items: center;
  gap: clamp(24px, 3vw, 44px);
  padding: clamp(28px, 3.6vw, 48px);
  border: 1px solid #d4dfcd;
  border-radius: 36px;
  background: radial-gradient(ellipse at 90% 10%, #d8e6c7, transparent 65%), #eaf0e0;
}
.feature-copy { grid-area: copy; }
.feature-copy .product-index { display: block; margin-bottom: 24px; font-size: 11px; }
.feature-copy h3 { margin: 0 0 22px; font-size: clamp(34px, 3.6vw, 48px); font-weight: 800; line-height: 1.04; letter-spacing: -.055em; }
.feature-copy p { max-width: 390px; margin: 0; color: var(--muted); font-size: 17px; line-height: 1.65; }
.feature-takeaway { display: block; margin-top: 28px; color: var(--leaf); font-size: 12px; font-weight: 700; }
.feature-visual { grid-area: visual; min-width: 0; margin: 0; }
.feature-visual img { display: block; width: 100%; height: auto; border-radius: 26px; }
.feature-visual figcaption { margin-top: 12px; color: var(--muted); font-size: 10px; line-height: 1.5; text-align: center; }
.feature-detail {
  grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr);
  grid-template-areas: "visual copy";
  border-color: #2f5646;
  color: var(--white);
  background: radial-gradient(ellipse at 10% 85%, #32634d, transparent 70%), var(--forest);
}
.feature-detail .product-index, .feature-detail .feature-takeaway { color: var(--lime); }
.feature-detail .feature-copy p, .feature-detail figcaption { color: #d0ded4; }
.feature-coverage { background: radial-gradient(ellipse at 85% 20%, #e9e5d2, transparent 65%), #efeee4; }
.product-section .demo-invite { margin-top: 32px; }

/* Match the hero's breakpoint: every visual precedes its centered copy. */
@media (max-width: 900px) {
  .product-features { gap: 24px; }
  .feature-panel, .feature-detail {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas: "visual" "copy";
    gap: 30px;
    padding: 32px;
  }
  .feature-visual { width: min(100%, 590px); justify-self: center; }
  .feature-copy { width: 100%; max-width: 540px; margin-inline: auto; text-align: center; }
  .feature-copy h3 { font-size: clamp(36px, 5.5vw, 46px); }
  .feature-copy h3 br { display: none; }
  .feature-copy .product-index { margin-bottom: 16px; }
  .feature-copy p { max-width: 480px; margin-inline: auto; }
  .feature-takeaway { margin-top: 20px; }
}
@media (max-width: 560px) {
  .feature-panel { gap: 24px; padding: 18px 18px 30px; border-radius: 26px; }
  .feature-visual img { border-radius: 18px; }
  .feature-visual figcaption { margin-top: 9px; font-size: 9px; }
  .feature-copy h3 { margin-bottom: 16px; font-size: clamp(30px, 8.6vw, 38px); }
  .feature-copy p { font-size: 15px; line-height: 1.65; }
  .feature-copy .product-index { font-size: 10px; }
  .feature-takeaway { font-size: 11px; }
}