/* /linux: the Linux landing page (2026-10-29). A reading page that scrolls (body.doc-page, doc.css),
 * reusing the /download card (pages.css) for the hero; this file only adds the sections below it. */
.lx { display: block; padding-top: clamp(24px, 5vh, 48px); padding-bottom: clamp(32px, 8vh, 72px); }
.lx .split { align-items: start; }
.lx .page-head h1 { font-size: clamp(26px, 4.4vw, 40px); max-width: 22ch; }
.lx section { margin-top: clamp(40px, 8vh, 72px); }
.lx h2 { margin: 0 0 12px; font-size: 18px; letter-spacing: -.03em; }
.lx .sec-lede { margin: -4px 0 16px; color: var(--muted-foreground); max-width: 64ch; }

/* screenshots: the overview wide, then runs and machines side by side */
.shots { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin: 0; }
.shots figure { margin: 0; min-width: 0; }
.shots figure:first-child { grid-column: 1 / -1; }
.shots img { display: block; width: 100%; height: auto; border: 1px solid var(--border); border-radius: 8px; box-shadow: var(--shadow); background: var(--background); }
.shots figcaption { margin-top: 8px; font-size: 12px; color: var(--muted-foreground); }

/* features and requirements: a two-column list of short facts */
.facts { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 32px; }
.facts li { padding-top: 12px; border-top: 1px solid var(--border); font-size: 13px; color: var(--muted-foreground); }
.facts b { display: block; color: var(--foreground); font-weight: 500; }

/* FAQ: question then answer, the same text as the FAQPage JSON-LD in the head */
.lx-faq { margin: 0; display: grid; gap: 16px; max-width: 76ch; }
.lx-faq dt { font-weight: 500; }
.lx-faq dd { margin: 4px 0 0; color: var(--muted-foreground); font-size: 13px; }
.lx-links { display: flex; flex-wrap: wrap; gap: 8px; }

@media (max-width: 860px) {
  .lx .split > .dl-card { width: 100%; max-width: 440px; }
}
@media (max-width: 600px) {
  /* pages.css hides the lede on phones for the one-screen pages; this page scrolls, so keep it */
  .lx .lede, .lx .fine-print { display: block; }
  .shots, .facts { grid-template-columns: minmax(0, 1fr); }
}