/**
 * Styles for the prerendered /learn pages — "Bright Workshop", same system as
 * the app.
 *
 * Standalone rather than importing the app's tokens.css: these pages ship
 * without the bundle, so the handful of values they need are restated here.
 * Kept deliberately small — one stylesheet, no framework, no font CSS beyond
 * the self-hosted face the app already serves.
 *
 * The two rules from the app's token file hold here too: no 1px borders on
 * surfaces, and every colour comes from a variable.
 */

@font-face {
  font-family: 'Outfit';
  src: url('/fonts/outfit-latin.woff2') format('woff2');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

:root {
  --font-sans: 'Outfit', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, 'SFMono-Regular', monospace;

  --bg-app: #f4f6fb;
  --surface: #ffffff;
  --surface-sunken: #f4f6fb;
  --divider: #e0e5f0;

  --text-primary: #151a26;
  --text-body: #5a6478;
  --text-muted: #98a0b3;
  --text-inverse: #ffffff;

  --op-cut: #ff6b4a;
  --op-score: #12b886;
  --op-engrave: #5b7cfa;

  --danger: #d92d20;
  --warning: #f59e0b;
  --on-danger: #b42318;
  --on-warning: #b45309;
  --on-info: #3a5bd9;

  --r-pill: 999px;
  --r-card: 20px;
  --r-control: 14px;

  --shadow-1: 0 1px 2px rgba(21, 26, 38, 0.05);
  --shadow-2: 0 2px 4px rgba(21, 26, 38, 0.04), 0 12px 32px rgba(21, 26, 38, 0.07);

  --measure: 68ch;
  color-scheme: light;
}

/*
 * Dark theme, driven by the app's own setting first and the operating system
 * second.
 *
 * These pages used to follow prefers-color-scheme alone, so someone running the
 * app in light mode on a dark-themed OS got a light app and dark articles —
 * the same site, two appearances, decided by something they had already
 * overridden. The app writes its choice to localStorage and sets an attribute
 * on <html>; a small script in the head of every Learn page reads the same
 * value and sets data-theme before first paint.
 *
 * Both selectors are needed. The explicit one wins when a choice has been made;
 * the media query still covers a first visit, where there is nothing stored
 * yet. `:not([data-theme="light"])` is what stops the OS overriding a
 * deliberate choice of light.
 */
:root[data-theme='dark'] {
    --bg-app: #0e121b;
    --surface: #171c28;
    --surface-sunken: #12161f;
    --divider: #262d3d;

    --text-primary: #f2f4f9;
    --text-body: #a8b0c2;
    --text-muted: #6f7890;

    --op-cut: #ff8666;
    --op-score: #34d9a4;
    --op-engrave: #8aa2ff;

    --on-danger: #ff9b90;
    --on-warning: #f5c46b;
    --on-info: #9db1ff;

    --shadow-1: 0 1px 2px rgba(0, 0, 0, 0.3);
    --shadow-2: 0 2px 4px rgba(0, 0, 0, 0.25), 0 12px 32px rgba(0, 0, 0, 0.35);

    color-scheme: dark;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme='light']) {
    --bg-app: #0e121b;
      --surface: #171c28;
      --surface-sunken: #12161f;
      --divider: #262d3d;
  
      --text-primary: #f2f4f9;
      --text-body: #a8b0c2;
      --text-muted: #6f7890;
  
      --op-cut: #ff8666;
      --op-score: #34d9a4;
      --op-engrave: #8aa2ff;
  
      --on-danger: #ff9b90;
      --on-warning: #f5c46b;
      --on-info: #9db1ff;
  
      --shadow-1: 0 1px 2px rgba(0, 0, 0, 0.3);
      --shadow-2: 0 2px 4px rgba(0, 0, 0, 0.25), 0 12px 32px rgba(0, 0, 0, 0.35);
  
      color-scheme: dark;
  }
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

body {
  margin: 0;
  background: var(--bg-app);
  color: var(--text-body);
  font-family: var(--font-sans);
  font-size: 17px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

img {
  max-width: 100%;
  height: auto;
}

a {
  color: var(--on-info);
  text-decoration-thickness: 1px;
  text-underline-offset: 2px;
}

a:hover {
  color: var(--op-cut);
}

code {
  font-family: var(--font-mono);
  font-size: 0.88em;
  padding: 0.14em 0.42em;
  border-radius: 6px;
  background: var(--surface-sunken);
  color: var(--text-primary);
}

/* ------------------------------------------------------------- site chrome */

.site {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  max-width: 1080px;
  margin: 0 auto;
  padding: 20px 24px;
}

.site__brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-weight: 700;
  font-size: 19px;
  color: var(--text-primary);
  text-decoration: none;
}

.site__mark {
  width: 22px;
  height: 22px;
  border-radius: 7px;
  background: linear-gradient(135deg, var(--op-cut), var(--op-engrave));
}

.site__nav {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  font-size: 15px;
}

.site__nav a {
  padding: 8px 14px;
  border-radius: var(--r-pill);
  color: var(--text-body);
  text-decoration: none;
  font-weight: 500;
}

.site__nav a:hover {
  background: var(--surface);
  color: var(--text-primary);
}

.site__nav a[aria-current='page'] {
  color: var(--text-primary);
  background: var(--surface);
  box-shadow: var(--shadow-1);
}

.site__cta,
.site__nav a.site__cta {
  background: var(--op-cut);
  color: var(--text-inverse);
  box-shadow: var(--shadow-1);
}

.site__cta:hover,
.site__nav a.site__cta:hover {
  background: var(--op-cut);
  color: var(--text-inverse);
  filter: brightness(1.06);
}

.site-footer {
  max-width: 1080px;
  margin: 72px auto 0;
  padding: 28px 24px 48px;
  font-size: 15px;
  color: var(--text-muted);
}

.site-footer p {
  margin: 4px 0;
}

.site-footer a {
  color: var(--text-muted);
}

/* ----------------------------------------------------------------- article */

.article,
.hub {
  max-width: 1080px;
  margin: 0 auto;
  padding: 8px 24px 0;
}

.article {
  max-width: calc(var(--measure) + 48px);
}

.crumbs {
  font-size: 14px;
  color: var(--text-muted);
  margin-bottom: 18px;
}

.crumbs a {
  color: var(--text-muted);
  text-decoration: none;
}

.crumbs a:hover {
  color: var(--op-cut);
}

.crumbs span {
  margin: 0 6px;
}

h1 {
  font-size: clamp(32px, 5vw, 44px);
  line-height: 1.12;
  letter-spacing: -0.02em;
  font-weight: 700;
  color: var(--text-primary);
  margin: 0 0 20px;
}

.article h2 {
  font-size: clamp(23px, 3vw, 27px);
  line-height: 1.25;
  letter-spacing: -0.01em;
  font-weight: 650;
  color: var(--text-primary);
  margin: 52px 0 14px;
  scroll-margin-top: 24px;
}

.article h3 {
  font-size: 19px;
  font-weight: 600;
  color: var(--text-primary);
  margin: 32px 0 10px;
}

.article p {
  margin: 0 0 18px;
  max-width: var(--measure);
}

.article strong {
  color: var(--text-primary);
  font-weight: 600;
}

.article ul,
.article ol {
  max-width: var(--measure);
  margin: 0 0 22px;
  padding-left: 22px;
}

.article li {
  margin-bottom: 10px;
}

.article li::marker {
  color: var(--op-cut);
  font-weight: 600;
}

.short-answer {
  background: var(--surface);
  border-radius: var(--r-card);
  box-shadow: var(--shadow-2);
  padding: 22px 24px;
  margin: 0 0 18px;
  font-size: 18px;
  color: var(--text-primary);
  border-left: 4px solid var(--op-cut);
}

.byline {
  font-size: 14px;
  color: var(--text-muted);
  margin: 0 0 4px;
}

/*
 * How the article was produced, next to the date rather than in the footer.
 * Quiet enough not to compete with the opening, present enough that someone
 * deciding whether to trust a settings table can see it without scrolling.
 */
/*
 * Closes the article rather than opening it. It was under the byline, where it
 * interrupted the reader before the first sentence; a note about how the piece
 * was made belongs where a colophon does, after the piece.
 */
.authorship {
  font-size: 13px;
  line-height: 1.55;
  color: var(--text-muted);
  margin: 34px 0 0;
  padding-top: 18px;
  border-top: 1px solid var(--hairline, rgba(128, 128, 128, 0.25));
}

/* --------------------------------------------------------------- callouts */

.callout {
  border-radius: var(--r-control);
  padding: 16px 20px;
  margin: 26px 0;
  max-width: var(--measure);
  background: var(--surface);
  box-shadow: var(--shadow-1);
  border-left: 4px solid var(--op-engrave);
}

.callout p {
  margin: 0;
}

.callout--danger {
  border-left-color: var(--danger);
  color: var(--on-danger);
}

.callout--warn {
  border-left-color: var(--warning);
  color: var(--on-warning);
}

.callout--note {
  border-left-color: var(--op-engrave);
}

/* ----------------------------------------------------------------- tables */

.table-wrap {
  overflow-x: auto;
  margin: 26px 0;
  border-radius: var(--r-card);
  background: var(--surface);
  box-shadow: var(--shadow-2);
}

table {
  border-collapse: collapse;
  width: 100%;
  font-size: 15.5px;
}

th,
td {
  text-align: left;
  padding: 13px 18px;
  vertical-align: top;
}

th {
  font-weight: 600;
  color: var(--text-primary);
  background: var(--surface-sunken);
  white-space: nowrap;
}

tbody tr + tr td {
  border-top: 1px solid var(--divider);
}

td strong {
  color: var(--text-primary);
}

/* ------------------------------------------------------------ product CTA */

.product {
  border-radius: var(--r-card);
  padding: 22px 24px;
  margin: 34px 0;
  max-width: var(--measure);
  background: var(--surface);
  box-shadow: var(--shadow-2);
}

.product h3 {
  margin: 0 0 8px;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--op-cut);
}

.product p {
  margin: 0 0 14px;
}

.product__cta {
  display: inline-block;
  font-weight: 600;
  text-decoration: none;
  color: var(--on-info);
}

.product__cta:hover {
  color: var(--op-cut);
}

/* --------------------------------------------------------------- FAQ, end */

.faq details {
  background: var(--surface);
  border-radius: var(--r-control);
  box-shadow: var(--shadow-1);
  padding: 4px 20px;
  margin-bottom: 10px;
  max-width: var(--measure);
}

.faq summary {
  cursor: pointer;
  padding: 14px 0;
  font-weight: 600;
  color: var(--text-primary);
  list-style: none;
}

.faq summary::-webkit-details-marker {
  display: none;
}

.faq summary::before {
  content: '+';
  display: inline-block;
  width: 1.2em;
  color: var(--op-cut);
  font-weight: 700;
}

.faq details[open] summary::before {
  content: '\2212';
}

.faq details p {
  margin: 0 0 16px;
}

.related ul {
  list-style: none;
  padding: 0;
}

.related li {
  margin-bottom: 8px;
}

.endcta {
  margin: 48px 0 0;
  padding: 30px 28px;
  border-radius: var(--r-card);
  background: linear-gradient(135deg, var(--op-cut), #ff9159);
  color: var(--text-inverse);
  max-width: var(--measure);
  box-shadow: var(--shadow-2);
}

.endcta h2 {
  margin: 0 0 8px;
  color: var(--text-inverse);
  font-size: 25px;
  font-weight: 650;
  letter-spacing: -0.01em;
}

.endcta p {
  margin: 0 0 18px;
  color: rgba(255, 255, 255, 0.92);
}

.endcta__button {
  display: inline-block;
  padding: 12px 22px;
  border-radius: var(--r-pill);
  background: var(--surface);
  color: var(--text-primary);
  font-weight: 600;
  text-decoration: none;
  box-shadow: var(--shadow-1);
}

.endcta__button:hover {
  color: var(--text-primary);
  transform: translateY(-1px);
}

/* -------------------------------------------------------------------- hub */

.lede {
  font-size: 19px;
  max-width: var(--measure);
  margin: 0 0 40px;
}

.hub__group {
  margin-bottom: 46px;
}

.hub__group h2 {
  font-size: 24px;
  font-weight: 650;
  letter-spacing: -0.01em;
  margin: 0 0 4px;
}

.hub__group h2 a {
  color: var(--text-primary);
  text-decoration: none;
}

.hub__group h2 a:hover {
  color: var(--op-cut);
}

.hub__blurb {
  margin: 0 0 18px;
  color: var(--text-muted);
}

.cards {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(290px, 1fr));
  gap: 16px;
}

.card a {
  display: block;
  height: 100%;
  padding: 22px 24px;
  border-radius: var(--r-card);
  background: var(--surface);
  box-shadow: var(--shadow-1);
  text-decoration: none;
  transition: box-shadow 0.18s ease, transform 0.18s ease;
}

.card a:hover {
  box-shadow: var(--shadow-2);
  transform: translateY(-2px);
}

.card h2,
.card h3 {
  margin: 0 0 8px;
  font-size: 18px;
  font-weight: 600;
  line-height: 1.3;
  color: var(--text-primary);
}

.card p {
  margin: 0;
  font-size: 15px;
  color: var(--text-body);
}

@media (max-width: 640px) {
  body {
    font-size: 16px;
  }

  .article,
  .hub,
  .site,
  .site-footer {
    padding-left: 18px;
    padding-right: 18px;
  }

  .short-answer {
    font-size: 17px;
    padding: 18px 20px;
  }
}

@media (prefers-reduced-motion: reduce) {
  * {
    transition: none !important;
  }

  html {
    scroll-behavior: auto;
  }

  .card a:hover,
  .endcta__button:hover {
    transform: none;
  }
}

/* ------------------------------------------------------------ free files */

.file-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
  gap: 18px;
  margin: 0 0 36px;
}

.file {
  margin: 0;
  padding: 18px;
  border-radius: var(--r-card);
  background: var(--surface);
  box-shadow: var(--shadow-1);
  display: flex;
  flex-direction: column;
  gap: 12px;
}

/* The preview is the real SVG inlined. Its own stroke is a 0.1mm hairline,
   which disappears on screen, so the display weight is set here rather than in
   the file — the downloaded file keeps its true cut-line width. */
.file__preview,
.card__preview {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 170px;
  padding: 10px;
  border-radius: var(--r-control);
  background: var(--surface-sunken);
}

.card__preview {
  height: 130px;
}

.file__preview svg,
.card__preview svg {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
}

.file__preview svg > g,
.card__preview svg > g {
  stroke-width: 0.7;
}

.file figcaption {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  font-size: 15px;
}

.file figcaption strong {
  color: var(--text-primary);
}

.file figcaption span {
  color: var(--text-muted);
  font-size: 13px;
  white-space: nowrap;
}

.file__download {
  display: block;
  text-align: center;
  padding: 11px 16px;
  border-radius: var(--r-pill);
  background: var(--op-cut);
  color: var(--text-inverse);
  font-weight: 600;
  font-size: 15px;
  text-decoration: none;
  margin-top: auto;
}

.file__download:hover {
  color: var(--text-inverse);
  filter: brightness(1.06);
}

.cards--files .card a {
  padding: 16px;
}

.cards--files .card h3 {
  margin-top: 14px;
}

/* A lone file should not sit in a narrow column with a wrapping caption. */
.file-grid--single {
  grid-template-columns: minmax(0, 420px);
}

.file-grid--single .file__preview {
  height: 230px;
}

/* ---------------------------------------------------------------- diagrams */

/*
 * Inline SVG explainers. They use the same custom properties as everything
 * else, so they follow the palette into dark mode rather than sitting on the
 * page as a pale rectangle the way an exported image would.
 */
.diagram {
  margin: 32px 0;
  padding: 20px 20px 14px;
  border: 1px solid var(--hairline, rgba(128, 128, 128, 0.22));
  border-radius: var(--r-control, 10px);
  background: var(--surface, transparent);
}

.diagram__svg {
  display: block;
  width: 100%;
  height: auto;
  overflow: visible;
}

.diagram figcaption {
  margin-top: 14px;
  font-size: 14px;
  line-height: 1.55;
  color: var(--text-body);
}

/* ------------------------------------------------------------- card art */

/*
 * A generated visual on each card. Category decides the motif and the colour,
 * so a row reads as a family; the arrangement varies from a hash of the slug so
 * two cards are still distinguishable. aria-hidden, because the heading beside
 * it already says what the article is.
 */
.card a {
  display: flex;
  gap: 16px;
  align-items: flex-start;
}

.card__art {
  flex: 0 0 auto;
  width: 84px;
  height: 50px;
  margin-top: 2px;
  border-radius: var(--r-control, 8px);
  background: var(--surface-sunken, rgba(128, 128, 128, 0.08));
  overflow: visible;
}

.card__text {
  min-width: 0;
}

/* ---------------------------------------------------------------- machines */

/*
 * The supported-machines page. Two audiences on one page — an owner asking
 * whether this drives their laser, and a manufacturer deciding whether to be
 * listed — so the manufacturer block is visually set apart rather than
 * interleaved, and everything above it answers the owner's question first.
 */

.machines__hero-point {
  margin: 0 0 44px;
  padding: 24px 26px;
  border-radius: var(--r-card);
  background: var(--surface);
  box-shadow: var(--shadow-1);
  border-left: 3px solid var(--op-cut);
}

.machines__hero-point h2 {
  margin-top: 0;
}

.machine-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 18px;
  margin: 0 0 40px;
}

.machine-card {
  margin: 0;
  padding: 20px;
  border-radius: var(--r-card);
  background: var(--surface);
  box-shadow: var(--shadow-1);
}

.machine-card h3 {
  margin: 0 0 4px;
  font-size: 20px;
}

.machine-card__tagline {
  margin: 0 0 10px;
  color: var(--text-primary);
  font-weight: 600;
}

.machine-card__reads {
  margin: 12px 0 0;
  padding: 12px 0 0;
  border-top: 1px solid var(--divider);
  list-style: none;
  font-size: 15px;
  color: var(--text-body);
}

.machine-card__reads li {
  margin: 0 0 5px;
  padding-left: 18px;
  position: relative;
}

.machine-card__reads li::before {
  content: '';
  position: absolute;
  left: 2px;
  top: 8px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--op-engrave);
}

.brand-list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0 0 40px;
  padding: 0;
  list-style: none;
}

.brand-list li {
  padding: 7px 14px;
  border-radius: var(--r-pill);
  background: var(--surface);
  box-shadow: var(--shadow-1);
  font-size: 15px;
  color: var(--text-primary);
}

.brand-list--verified li::before {
  content: '\2713\00a0';
  color: var(--op-score);
  font-weight: 700;
}

.connections {
  margin: 0 0 40px;
}

.connections dt {
  font-weight: 650;
  color: var(--text-primary);
  margin-top: 16px;
}

.connections dd {
  margin: 4px 0 0;
  max-width: var(--measure);
  color: var(--text-body);
}

.machines__oem {
  margin: 48px 0 40px;
  padding: 28px;
  border-radius: var(--r-card);
  background: var(--surface-sunken);
  border: 1px solid var(--divider);
}

.machines__oem h2 {
  margin-top: 0;
}

.machines__oem-contact {
  margin-top: 22px;
}

.machines__cta {
  margin: 0 0 24px;
}

/*
  The one line on a user-facing page that is addressed to manufacturers.
  Deliberately quiet: it is a signpost for the few people who need it, not a
  pitch aimed at the hobbyist reading the rest of the page.
*/
.machines__aside {
  margin-top: 28px;
  font-size: 15px;
  color: var(--text-muted);
}

.site-footer__aside {
  margin-top: 10px;
  font-size: 14px;
}

.button {
  display: inline-block;
  padding: 12px 22px;
  border-radius: var(--r-pill);
  background: var(--op-cut);
  color: var(--text-inverse);
  font-weight: 600;
  font-size: 16px;
  text-decoration: none;
}

.button:hover {
  color: var(--text-inverse);
  filter: brightness(1.06);
}

/*
 * The hero point runs beside a photograph of the thing it describes. A
 * screenshot of the panel actually reading a machine argues the case better
 * than the paragraph does, so on a wide screen they sit together; on a narrow
 * one the text leads and the image follows.
 */
.machines__hero-point--split {
  display: grid;
  gap: 28px;
  align-items: start;
}

@media (min-width: 900px) {
  .machines__hero-point--split {
    grid-template-columns: 1fr 300px;
  }
}

.machines__shot {
  width: min(296px, 100%);
  margin: 0;
  justify-self: center;
  overflow: hidden;
  border: 1px solid var(--divider);
  border-radius: 14px;
  background: var(--surface);
}

.machines__shot-label {
  padding: 12px 16px;
  color: var(--text-body);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.machines__shot-preview {
  display: flex;
  height: 280px;
  align-items: center;
  justify-content: center;
  padding: 18px;
  background: var(--surface-sunken);
}

.machines__shot img {
  display: block;
  width: auto;
  max-width: 100%;
  max-height: 100%;
  height: auto;
  object-fit: contain;
  pointer-events: none;
  border-radius: 6px;
  box-shadow: var(--shadow-2, 0 14px 40px -18px rgba(10, 14, 24, 0.5));
}

.machines__shot figcaption { padding: 12px 16px; margin: 0; border-top: 1px solid var(--divider); color: var(--text-primary); font-size: 13px; }
.machines__shot figcaption a { display: block; min-height: 44px; padding: 12px 0; font-size: 12px; font-weight: 600; color: var(--text-primary); }

/* The named-machine tables. One block per brand, so a brand reads as a group
   and a new one slots in without reflowing the others. */
.machine-brand {
  margin: 0 0 28px;
}

.machine-brand h3 {
  margin: 0 0 10px;
  font-size: 19px;
}

.machine-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 15px;
}

.machine-table th {
  text-align: left;
  font-size: 13px;
  font-weight: 600;
  color: var(--text-muted);
  padding: 0 12px 8px 0;
  border-bottom: 1px solid var(--divider);
  white-space: nowrap;
}

.machine-table td {
  padding: 11px 12px 11px 0;
  border-bottom: 1px solid var(--divider);
  color: var(--text-body);
  vertical-align: top;
}

.machine-table td:first-child {
  color: var(--text-primary);
  font-weight: 550;
}

.machine-table__num {
  font-family: var(--font-mono);
  font-size: 14px;
  white-space: nowrap;
}

.machine-table__variant {
  display: block;
  font-weight: 400;
  font-size: 13px;
  color: var(--text-muted);
}

.machines__list-note {
  margin: 0 0 40px;
  color: var(--text-muted);
  max-width: var(--measure);
}

@media (max-width: 640px) {
  .machine-table,
  .machine-table tbody,
  .machine-table tr,
  .machine-table td {
    display: block;
    width: 100%;
  }

  .machine-table thead {
    display: none;
  }

  .machine-table tr {
    padding: 12px 0;
    border-bottom: 1px solid var(--divider);
  }

  .machine-table td {
    border: none;
    padding: 2px 0;
  }
}

/*
 * The nav has to survive a phone.
 *
 * At 390px "Free files" and "Open the app" each wrapped onto two lines, so the
 * header arrived as a stack of broken pills -- the first thing anybody sent a
 * link sees, and the first thing a manufacturer sees. Four items do fit; they
 * just needed to be told not to break mid-label and to give up some padding.
 */
@media (max-width: 560px) {
  .site {
    gap: 8px;
  }

  .site__brand {
    font-size: 17px;
    gap: 7px;
  }

  .site__nav {
    gap: 2px;
    font-size: 14px;
  }

  .site__nav a {
    padding: 7px 9px;
    white-space: nowrap;
  }

  .site__cta,
  .site__nav a.site__cta {
    padding: 7px 12px;
    white-space: nowrap;
  }
}

/* Body copy sized for a phone rather than scaled down from a desktop. */
@media (max-width: 560px) {
  .lede {
    font-size: 17px;
  }
}

/*
 * A screenshot per theme, chosen by CSS.
 *
 * These pages pick their theme before first paint from the app's stored
 * setting, falling back to the OS. There is no script here to swap an image
 * afterwards, so both ship and the wrong one is hidden -- which also means
 * the right one is correct in the very first frame rather than flashing.
 *
 * The dark twin is marked aria-hidden by carrying an empty alt, so a screen
 * reader meets one description rather than two.
 */
img.themed-shot--dark,
.machines__shot a.themed-shot--dark {
  display: none;
}

:root[data-theme='dark'] .themed-shot--light {
  display: none;
}

:root[data-theme='dark'] .themed-shot--dark {
  display: block;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme='light']) .themed-shot--light {
    display: none;
  }

  :root:not([data-theme='light']) .themed-shot--dark {
    display: block;
  }
}