/* =============================================================================
   /systems/ — page layout only.
   Every component, token and type style comes from core.css. Nothing here
   restyles a component; these rules only arrange this page's sections.
   ============================================================================= */

/* 1 · Hero — one measured column with air between the moves. */
.page-systems .systems-hero .lede{ margin-top: var(--space-6); }
.page-systems .systems-hero .btn-row{ margin-top: var(--space-8); }

/* 2 · Screenshot rail — desktop offsets so the three frames read as a stack
   of real windows rather than a strip of thumbnails. The grid collapses on
   its own below 980px; the offsets exist only where there are three columns. */
@media (min-width: 980px){
  .page-systems .shot-grid > :nth-child(2){ margin-top: var(--space-10); }
  .page-systems .shot-grid > :nth-child(3){ margin-top: var(--space-16); }
}
.page-systems .shot-grid figcaption .mono{
  display: block;
  margin-bottom: var(--space-2);
}

/* 5 · Build vs buy vs do nothing — the scoping line sits clear of the panels. */
.page-systems .options-note{ margin-top: var(--space-10); }

/* 7 · Final CTA — the SLA line sits clear of the CTA row. */
.page-systems .final-cta .sla-line{ margin-top: var(--space-6); }

/* The H1 steps down on a narrow phone, because a masked line that wraps reveals
   as one block. --fs-hero bottoms out at its 2.90rem floor while the column
   keeps shrinking, so the longest line overruns below 350px. Same step, and
   the same reason, as the homepage and teardown heroes. */
@media (max-width: 400px){
  .page-systems h1.display-hero{ font-size: var(--fs-4xl); }
}