/* Workbench subpages: /integrations/*, /solutions/*.
 * Loaded after home.css, whose wb-* archetypes (hero, shot + pins, spec sheet,
 * index rows, FAQ, facts) these pages reuse. Only what home.css lacks lives here.
 * design-system: design.md · macrostructure: Workbench · section heads left-aligned, no eyebrows */

.pg-hero .wb-hero__copy h1 { max-width: 18ch; }
.pg-hero--text .wb-hero__copy { max-width: 46rem; }
.pg-hero--text .wb-hero__copy h1 { max-width: 22ch; }

/* Key facts under the hero: a ruled strip of label/value pairs */
.pg-facts {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  margin: var(--space-2xl) 0 0;
  border-block: var(--rule-hair) solid var(--color-rule);
}
.pg-facts > div { padding: var(--space-md) var(--space-lg) var(--space-md) 0; }
.pg-facts > div + div { padding-left: var(--space-lg); border-left: var(--rule-hair) solid var(--color-rule); }
.pg-facts dt { margin: 0 0 var(--space-2xs); }
.pg-facts dd { margin: 0; color: var(--color-ink); line-height: 1.4; }

.pg-section { padding-block: var(--space-3xl) 0; }
.pg-section--last { padding-bottom: var(--space-3xl); }

/* Long Document column for explanatory prose */
.pg-prose { max-width: 65ch; }
.pg-prose h2 { margin: 0 0 var(--space-md); }
.pg-prose h3 { margin: var(--space-xl) 0 var(--space-xs); font-size: var(--text-h3); }
.pg-prose p { margin: 0 0 var(--space-md); }
.pg-prose ul,
.pg-prose ol { margin: 0 0 var(--space-md); padding-left: 1.25rem; }
.pg-prose li + li { margin-top: var(--space-2xs); }

/* Ruled rows: name on the left, explanation on the right */
.pg-rows { margin: 0; padding: 0; list-style: none; border-top: var(--rule-hair) solid var(--color-ink); }
.pg-row {
  display: grid;
  grid-template-columns: minmax(0, 4fr) minmax(0, 8fr);
  gap: var(--space-xl);
  padding-block: var(--space-lg);
  border-bottom: var(--rule-hair) solid var(--color-rule);
}
.pg-row h3 { margin: 0; font-size: var(--text-h3); }
.pg-row p { margin: 0; max-width: 62ch; }
.pg-row p + p { margin-top: var(--space-xs); }

/* Limits: a plain ruled list, prefixed with a short rule like the role lists */
.pg-limits { display: grid; gap: var(--space-sm); margin: 0; padding: 0; list-style: none; }
.pg-limits li { position: relative; padding-left: var(--space-lg); max-width: 62ch; }
.pg-limits li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.8em;
  width: 0.75rem;
  height: 1px;
  background: var(--color-muted);
}

.pg-sources { margin-top: var(--space-md); font-size: var(--text-label); color: var(--color-muted); }
.pg-sources a { color: inherit; }

/* Closing band: one sentence and the page's CTAs */
.pg-close {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-lg);
  margin-top: var(--space-3xl);
  padding-block: var(--space-xl);
  border-top: var(--rule-hair) solid var(--color-ink);
}
.pg-close h2 { margin: 0; font-size: var(--text-h3); max-width: 32ch; }
.pg-close__actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-md) var(--space-lg); }

@media (max-width: 60rem) {
  .pg-facts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pg-facts > div:nth-child(odd) { padding-left: 0; border-left: 0; }
  .pg-facts > div:nth-child(n + 3) { border-top: var(--rule-hair) solid var(--color-rule); }
  .pg-row { grid-template-columns: minmax(0, 1fr); gap: var(--space-xs); }
}

@media (max-width: 40rem) {
  .pg-facts { grid-template-columns: minmax(0, 1fr); }
  .pg-facts > div,
  .pg-facts > div + div { padding: var(--space-sm) 0; border-left: 0; }
  .pg-facts > div + div { border-top: var(--rule-hair) solid var(--color-rule); }
  .pg-section { padding-top: var(--space-2xl); }
  .pg-section--last { padding-bottom: var(--space-2xl); }
  .pg-close { margin-top: var(--space-2xl); }
  .pg-close__actions .ds-btn { width: 100%; }
}