/* Product guide: the same four pillars as the landing, in a reading layout. */
.spm-workflow .workflow-steps { list-style: none; margin: 0; gap: 20px; padding: 26px 20px; }
.spm-workflow .workflow-step { text-align: center; }
.spm-workflow .workflow-step > .icon { width: 24px; height: 24px; margin: 0 auto 14px; }
.spm-workflow .workflow-step strong { min-height: 3em; font-size: 12px; }
.spm-workflow .workflow-step small { max-width: 155px; margin: 6px auto 0; font-size: 11px; }
.spm-workflow .workflow-step:not(:last-child):after { top: 12px; left: calc(50% + 25px); right: auto; width: calc(100% - 30px); background: var(--line); }
.spm-pillar > .text-link { margin-top: 18px; }
.spm-pillar-detail { margin-top: 26px; }
.spm-pillar-detail > h3 { font-size: 18px; line-height: 1.4; }
.spm-pillar-detail > p { margin-top: 12px; }
.spm-pillar-detail dl { display: grid; gap: 22px; margin: 24px 0 0; }
.spm-pillar-detail dt { font-size: 14px; font-weight: 550; color: var(--ink); }
.spm-pillar-detail dd { margin: 6px 0 0; color: var(--muted); font-size: 14px; line-height: 1.85; }
@media (max-width: 900px) { .spm-workflow .workflow-step:not(:last-child):after { display: none; } }
@media (max-width: 480px) {
  .spm-workflow .workflow-steps { grid-template-columns: 1fr; gap: 24px; padding: 24px 18px; }
  .spm-workflow .workflow-step { display: grid; grid-template-columns: 28px minmax(0,1fr); gap: 4px 14px; text-align: left; }
  .spm-workflow .workflow-step > .icon { grid-row: 1 / 3; margin: 0; }
  .spm-workflow .workflow-step strong { min-height: 0; }
  .spm-workflow .workflow-step small { grid-column: 2; max-width: none; margin: 0; }
  .spm-workflow .workflow-step:not(:last-child):after { display: block; left: 11px; top: 34px; bottom: -14px; width: 1px; height: auto; }
  .spm-pillar-detail dd { font-size: 13px; }
}
/* Actual product captures are content, with a full-size image link for detail. */
.product-screenshot { width: 100%; max-width: 540px; margin: 22px 0; }
.product-screenshot-link { display: block; border-radius: 12px; }
.product-screenshot img { display: block; width: 100%; height: auto; border: 1px solid var(--line); border-radius: 12px; background: #f4f7f8; }
.product-screenshot-link > span { display: block; margin-top: 9px; color: var(--ink); font-size: 11px; text-align: right; }
.product-screenshot figcaption { margin-top: 8px; color: var(--muted); font-size: 12px; line-height: 1.7; }
.product-screenshot figcaption > span { white-space: nowrap; }
.product-screenshot-link:focus-visible { outline: 3px solid #167c87; outline-offset: 5px; }
body[data-page="spm"] :is(.article-meta,.section-number), .spm-workflow figcaption span, .spm-workflow .workflow-step small { color: #60666e; }