/* The Shopify and WooCommerce integration pages (/partners/shopify/,
   /partners/woocommerce/). Page-local only: everything structural comes from
   site.css (steps-grid, installed-hero, connect-slip, merchant-card, faq-list
   are all reused as-is). This file adds the one thing neither of those pages
   needed before: a reading column for install instructions, requirements and
   the report-orders note, typeset the way .legal sets its own prose so a
   numbered list here reads like the rest of the site's documentation. */

.integration-reading > * { max-width: 880px; }

.integration-reading h2 { margin-bottom: var(--tud-space-3); }
.integration-reading h3 {
  margin: var(--tud-space-6) 0 var(--tud-space-2);
  font-size: 17px;
  line-height: 1.3;
  letter-spacing: -0.012em;
  color: var(--tud-color-text-primary);
}
.integration-reading p,
.integration-reading ul,
.integration-reading ol { color: var(--tud-color-text-secondary); line-height: 1.7; }
.integration-reading p { margin: 0 0 var(--tud-space-3); }
.integration-reading ul,
.integration-reading ol { margin: 0 0 var(--tud-space-4); padding-left: 1.25em; }
.integration-reading li { margin-bottom: var(--tud-space-2); padding-left: var(--tud-space-1); }
.integration-reading a { font-weight: 800; }
.integration-reading > section { margin-bottom: var(--tud-space-8); }
.integration-reading > section:last-child { margin-bottom: 0; }

/* Same treatment as .legal code on the legal pages: the site has no
   monospace face of its own, so inline code borrows the platform's. */
.integration-reading code {
  padding: 2px 6px;
  border: var(--tud-border-hairline) solid var(--tud-color-accent-tint-border);
  border-radius: var(--tud-radius-xs);
  color: var(--site-accent-text);
  background: var(--tud-color-accent-tint);
  font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;
  font-size: 0.86em;
  white-space: nowrap;
}

/* The download button leads the WooCommerce install steps so it reads as the
   one action on the page, not a sixth step tacked onto the numbered list. */
.integration-download { margin-bottom: var(--tud-space-6); }
.integration-download .fine { margin: var(--tud-space-2) 0 0; }