/* LabVision — "Our mission" section (#mission).
   Consumes the tokens and classes in style.css; adds only what the section needs. */

/* pixels → events → record */
#mission .m-flow { display: grid; grid-template-columns: 1fr auto 1fr auto 1fr; gap: var(--sp-16); align-items: start; }
#mission .m-step { padding: var(--sp-32); display: flex; flex-direction: column; gap: var(--sp-12); min-width: 0; }
#mission .m-step .n { font-family: var(--mono); font-size: var(--fs-xs); letter-spacing: .1em; text-transform: uppercase; color: var(--teal-hi); }
#mission .m-step h3 { font-size: var(--fs-h6); line-height: var(--lh-lg); }
#mission .m-step p { color: var(--fg-2); }
#mission .m-arrow { align-self: start; margin-top: 4.1rem; width: 22px; height: 22px; color: var(--teal-hi); flex: none; }
#mission .m-fields {
  margin: var(--sp-8) 0 0; padding-top: var(--sp-16); border-top: 1px solid var(--line);
  display: grid; grid-template-columns: auto 1fr; gap: .4rem var(--sp-16); font-size: var(--fs-sm); line-height: var(--lh-xl);
}
#mission .m-fields dt { font-family: var(--mono); font-size: var(--fs-xs); color: var(--fg); padding-top: .2em; }
#mission .m-fields dd { margin: 0; color: var(--fg-3); }
@media (max-width: 991px) {
  #mission .m-flow { grid-template-columns: 1fr; }
  #mission .m-arrow { justify-self: center; margin-top: 0; transform: rotate(90deg); }
}

/* the honest card: where the record goes, and what is not shipped */
#mission .m-into { display: grid; grid-template-columns: 1.1fr 1fr; gap: var(--sp-64); align-items: start; }
@media (max-width: 991px) { #mission .m-into { grid-template-columns: 1fr; gap: var(--sp-32); } }

/* who it serves: numbered rows on hairlines */
#mission .m-for { list-style: none; margin: 0; padding: 0; }
#mission .m-row {
  position: relative; display: grid; grid-template-columns: 4rem 1fr 1.6fr; gap: var(--sp-32);
  padding: var(--sp-32) 0; align-items: start;
}
#mission .m-row > .sep { position: absolute; top: 0; left: 0; right: 0; }
#mission .m-row .n { font-family: var(--mono); font-size: var(--fs-sm); color: var(--teal-hi); padding-top: .35em; }
#mission .m-row h3 { font-size: var(--fs-h6); line-height: var(--lh-lg); }
#mission .m-row h3 small { display: block; font-size: var(--fs-sm); color: var(--fg-3); margin-top: .35rem; }
#mission .m-row p { color: var(--fg-2); max-width: 44rem; }
#mission .m-row .later { color: var(--fg-3); }
@media (max-width: 767px) {
  #mission .m-row { grid-template-columns: 2.5rem 1fr; gap: var(--sp-12) var(--sp-16); padding: var(--sp-24) 0; }
  #mission .m-row p { grid-column: 2; }
}

/* closing line */
#mission .m-close { display: grid; grid-template-columns: 1fr auto; gap: var(--sp-32); align-items: center; }
#mission .m-close .h5 { max-width: 30ch; }
@media (max-width: 767px) { #mission .m-close { grid-template-columns: 1fr; } }