/* Manufacturing page. Inherits tokens from product-page.css and cmt-theme.css. */

/* One reading column for the whole page, in rem rather than ch.
   ch resolves against the font-size of the element it is written on, so
   "max-width: 94ch" on a 2rem heading came out around 1500px and constrained
   nothing: every section heading sat flush against the page gutter while its
   own paragraph was inset by 200px. rem is root-relative, so a heading and the
   text under it now land on the same left edge. */
:root { --cmt-col: 50.5rem; }

/* A centred reading column inside the shell. Pinned hard left the prose sat
   flush against the gutter; centred at var(--cmt-col) it has room on both sides. */
.mfg-mission { padding: 40px 0 8px; max-width: var(--cmt-col); margin-left: auto; margin-right: auto; }
.mfg-mission h2,
.mfg-section h2,
.mfg-cta h2 { font-size: clamp(1.5rem, 2.6vw, 2rem); letter-spacing: -.02em; margin: 0 0 14px; }
.mfg-mission p { line-height: 1.7; margin: 0 0 16px; }
.mfg-lede { font-size: 1.2rem; line-height: 1.6; }

.mfg-section { padding: 34px 0 8px; }
.mfg-section > p { max-width: var(--cmt-col); margin-left: auto; margin-right: auto; line-height: 1.7; color: var(--cmt-muted); }

.mfg-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 16px;
  margin: 20px 0 8px;
}
.mfg-card {
  background: var(--cmt-surface);
  border: 1px solid var(--cmt-line);
  border-radius: 6px;
  padding: 20px;
}
.mfg-card h3 { margin: 0 0 8px; font-size: 1.05rem; }
.mfg-card p { margin: 0; color: var(--cmt-muted); line-height: 1.65; font-size: .95rem; }

.mfg-list { max-width: var(--cmt-col); margin: 16px auto 0; padding-left: 20px; }
.mfg-list li { margin: 0 0 10px; line-height: 1.65; color: var(--cmt-muted); }
.mfg-list strong { color: var(--cmt-ink); }

/* Tables are the one thing allowed to scroll sideways on a phone. */
.mfg-table-wrap { overflow-x: auto; margin-top: 16px; }
.mfg-table { border-collapse: collapse; width: 100%; min-width: 520px; font-size: .95rem; }
.mfg-table th,
.mfg-table td { text-align: left; padding: 10px 14px; border-bottom: 1px solid var(--cmt-line); }
.mfg-table th { font-size: .78rem; letter-spacing: .08em; text-transform: uppercase; color: var(--cmt-muted); }

.mfg-cta { padding: 36px 0 56px; }
.mfg-cta p { color: var(--cmt-muted); margin: 0 0 18px; }
.mfg-cta .actions { display: flex; gap: 10px; flex-wrap: wrap; }

@media (max-width: 560px) {
  .mfg-mission { padding-top: 28px; }
  .mfg-section { padding-top: 26px; }
  .mfg-card { padding: 16px; }
}

/* Everything on the page shares one centred column width. */
.mfg-section h2,
.mfg-cta h2,
.mfg-cta p,
.mfg-grid,
.mfg-table-wrap,
.mfg-cta .actions { max-width: var(--cmt-col); margin-left: auto; margin-right: auto; }
.mfg-grid { margin-top: 20px; margin-bottom: 8px; }