/* A explicação fica ao lado do exemplo, sem esticar painéis vazios. */
.labs-page .motion-grid { display: block; }
.labs-page .motion-sample {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr);
  align-items: center;
  gap: 36px;
  min-height: 0;
  padding: 28px 0;
  border-radius: 0;
  background: transparent;
  border-top: 1px solid var(--line);
}
.sample-description .kicker { display: block; margin: 0 0 12px; }
.labs-page .sample-description h2 { font-size: 23px; line-height: 1.25; margin: 0 0 12px; }
.labs-page .sample-description p { font-size: 14px; line-height: 1.65; margin: 0; max-width: 430px; }
.labs-page .sample-description .sample-note { font-size: 12px; margin-top: 14px; color: #637080; }
.sample-stage {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-width: 0;
  min-height: 185px;
  padding: 28px;
  background: #f5f7f9;
  border: 1px solid #edf0f3;
  border-radius: 7px;
  text-align: center;
}
.sample-stage .arrival { text-align: left; }
.labs-page .sample-stage > p { max-width: 340px; font-size: 13px; line-height: 1.6; margin: 18px 0 0; }
.sample-stage [role="status"] { min-height: 63px; display: flex; align-items: center; justify-content: center; }
.labs-page .sample-stage .segmented { flex-wrap: wrap; justify-content: center; }
.labs-page .sample-stage .segmented button:hover { background: #e8eef5; color: #111820; }
.labs-page .sample-stage .segmented button[aria-pressed="true"]:hover { background: #005dcc; color: white; }
@media (max-width: 768px) {
  .labs-page .motion-sample { gap: 20px; grid-template-columns: 1fr; padding: 24px 0; }
  .sample-stage { min-height: 150px; padding: 24px 18px; }
  .labs-page .sample-description h2 { font-size: 21px; }
  .labs-page .sample-description p { max-width: none; }
}